CSSのみのモーダルウィンドウ「Pure CSS modal」

はじめに

モーダルウィンドウを実装する際に便利な「Pure CSS modal」をご紹介します。
気になっていたので制作で使ってみたところ、かなり使いやすいと感じました。
JavaScriptを使用せずCSSのみで作られているので、実装もかなり楽にできるはずです。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

CSSの読み込み

パスは適宜変えて下さい。

<link rel="stylesheet" href="css/modal.css">

モーダル部分

<div class="modal">
  <input id="modal-trigger" class="checkbox" type="checkbox">
  <div class="modal-overlay">
    <label for="modal-trigger" class="o-close"></label>
    <div class="modal-wrap">
      <label for="modal-trigger" class="close">&#10006;</label>
      <h2>モーダルのタイトル</h2>
      <p>テキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

モーダルを開くトリガー

公式ドキュメントのモーダルを開くトリガーの記述は間違っているようです。
上記のモーダルを開く場合
modal_trigger → modal-trigger
が正解です。

<label for="modal-trigger">モーダルが開きます</label>

仕組み

CSSで非表示にしているチェックボックスがあり、そのチェックボックスに対してlabel属性で紐付けをしています。
もしチェックされていたらモーダルが開き、チェックされていなかったらモーダルが閉じるようにCSSで制御されています。
もし最初からモーダルが開いている状態にしたい場合、以下の部分に「checked=”checked”」と追記すれば最初から開いた状態になります。

<input id="modal-trigger" class="checkbox" type="checkbox" checked="checked">

カスタマイズ

デフォルトで様々なスタイルが用意されています。
使用したい場合はクラス「modal-wrap」に追記していく形になります。

<div class="modal-wrap from-top">上からアニメーションして表示される</div>

<div class="modal-wrap from-bottom">下からアニメーションして表示される</div>

<div class="modal-wrap from-left">左からアニメーションして表示される</div>

<div class="modal-wrap from-right">右からアニメーションして表示される</div>

<div class="modal-wrap a-center">モーダルを上下左右真ん中に表示</div>

<div class="modal-wrap small">モーダルのサイズを小さくする</div>

<div class="modal-wrap full">モーダルのサイズを画面幅一杯にする</div>

CSSを編集できるのであれば、もっとバリエーションは増やせると思います。

さいごに

全てCSSなので、個人的にはかなり使いやすいと思います。
最近ではJavaScript無しで実装するアイデアが多く出てきています。
これからも要チェックですね。