[CSS] レスポンシブなモーダルウィンドウを簡単に作る

ウェブのお仕事をしていると見た目の表現をリッチにさせたい要望・仕様はつきものですが最近はCSS のtransform やanimation を使うとこれまでJavaScript で表現しがちだったことも比較的容易に表現できるようになりました。クリックやフォーカスなどのイベントはJavaScript に任せイベントきっかけで発火する表現はCSS に任せ ”仕掛けと表現のすみわけ” をすることが可能になりました。

今回はその一つの例としてモーダルウィンドウを実装してみたいと思います。仕様は以下としてみます。

OPENボタンをクリックしたらモーダルウィンドウが表示される
そのモーダルウィンドウは天地中央配置
レスポンシブ対応
CLOSEボタンないしモーダルウィンドウの背景をクリックしたらモーダルウィンドウが非表示になる

HTML はモーダルウィンドウを表示するための <button> 、モーダルウィンドウ（#modal）とその背景（#overlay）を構成する <div> 要素になります。

<button id="open">OPEN!</button>
<div id="modal">
    <p>ここにコンテンツが入ります。</p>
    <p>ここにコンテンツが入ります。</p>
    <p>ここにコンテンツが入ります。</p>
    <div>
        <button id="close">CLOSE</button>
    </div>
</div>
<div id="overlay"></div>

JavaScript はOPENボタン（#open）をクリックしたらモーダルウィンドウ（#modal）とその背景（#overlay）に .active を付与、CLOSEボタン（#close）ないしモーダルウィンドウの背景（#overlay）をクリックしたらモーダルウィンドウ（#modal）とその背景（#overlay）に付与した .active を除去する各トリガーの定義のみになります。

$(document).ready(function() {
    $("#open").on("click", function(e) {
        e.preventDefault();
        $("#overlay, #modal").addClass("active");

        $("#close, #overlay").on("click", function() {
            $("#overlay, #modal").removeClass("active");
            return false;
        });
    });
});

あとはCss でモーダルウィンドウ（#modal）とその背景（#overlay）は初期設定で非表示状態を、 .active が付与されたら表示されるよう定義しています。

またモーダルウィンドウを天地中央配置するために、まず top:50%; left:50%; でモーダルウィンドウを天地中央に寄せます。ただこれではモーダルウィンドウの起点が左上になっているためモーダルウィンドウの横幅と高さぶん天地中央からずれてしまいます。そこで transform:translate(-50%, -50%); を使い該当要素（#modal）の横幅と高さの半分さらに左上へずらしモーダルウィンドウの起点を天地中央になるような定義としています。

#overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .65);
}
#modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    max-width: 70vw;
    max-height: 70vh;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 8px;
    background-color: #fff;
}
.active {
    display: block !important;
}

実際のデモはこちら。

ブラウザを縦・横のどちらにグイグイと縮めたり広げたりしてもスムーズに天地中央にモーダルウィンドウが表示されると思います。JavaScript でブラウザとモーダルウィンドウの縦・横の大きさを測り四則演算から云々みたいなちょっと手間なやり方がCss 定義のみで再現することが可能になりました。またJavaScript は各イベントによってクラスセレクタを付与したり除去するだけに特化させ実際のUI形成はCss に担わせることで役割が明確になりました。

モーダルウィンドウが表示されるときに効果（フェードインやスライドインなど）を加えたい場合も付与したクラスセレクタに対してCss のanimation を使えばこれまた少し前まではJavaScript でゴリゴリ書く必要があったアニメーションをCss に任せることができソースコードの見通しがよく維持できると思います。これに関しても気が向いたら記事を書いてみたいと思います。

CSSに関するその他の記事

2018.05.07
お仕事っぽいこと