纯 CSS 打造一个模态（modal）框

我们在各种各样的网站上看到各种各样的 Modal 框。下面为大家展示一种纯 CSS 写出来的 Modal 框，主要利用了:target 这个属性

基础实现

// css
.overlay {
    visibility: hidden;
}

.overlay:target {
    visibility: visible;
}

// html
<a href="#join-modal">Join</a>

<div id="join-modal" class="overlay">
    <div class="modal">
        这只是一个测试Modal
    </div>
</div>

实现原理

上面的示例显示了一个最简单的 modal 框，核心原理就是使用了 CSS伪类:target。当我们访问的地址加上对应的铆点时，对应的 CSS 效果就会生效。假设我们的地址为 modal.test，那么当点击上面的 a 标签的时候，页面地址会变成 modal.test#join-modal，此时:target 伪类生效，modal就会显示。

页面优化

上面的代码只是演示了最基础的效果，让我们稍微优化一下，让这个看起来像一个真正的 modal 框。

// css
.overlay {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
}

.overlay:target {
    visibility: visible;
}

.modal {
    position: relative;
    width: 600px;
    max-width: 80%;
    background: white;
    border-radius: 8px;
    padding: 1em 2em;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: grey;
    text-decoration: none;
}

.overlay .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
}

// html
<a href="#join-modal">Join</a>
<div id="#join-modal" class="overlay">
    <a href="#" class="cancel"></a>

    <div class="modal">
        <h1>Pick a Plan</h1>

      <p>
       Lorem ipsum...
      </p>

      <a href="#" class="close">×</a>
    </div>
</div>

这样我们的 modal 框就变得比较像样了。

封装组建

由于我们可能各个地方使用 modal 框，因此，我们可以将其封装成 Laravel 的组件（Vue组件的封装与之类似）。

// modal.blade.php
<div id="{{ $name }}" class="overlay">
    <a href="#" class="cancel"></a>

    <div class="modal">
        {{ $slot }}

        <a href="#" class="close">×</a>
    </div>
</div>

// modal.css
.overlay {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
}

.overlay:target {
    visibility: visible;
}

.modal {
    position: relative;
    width: 600px;
    max-width: 80%;
    background: white;
    border-radius: 8px;
    padding: 1em 2em;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: grey;
    text-decoration: none;
}

.overlay .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
}

// usage.blade.php
<a href="#join-modal">Join</a>

@component('modal', ['name' => 'join-modal'])
    <h1>Pick a Plan</h1>

    <p>
       Lorem ipsum...
    </p>
@endcomponent

就这样我们封装好了一个 Modal 框。效果如下：

纯 CSS 打造一个模态（modal）框