純 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 框。效果如下：