CSSのみでモーダルウィンドウを作る

See the Pen CSS Only Modal window by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

JSを使わないモーダルウィンドウの作り方。

HTML

<div class="modal">
  <input type="checkbox" class="modal-check" id="modal-check"/>
  <div class="modal-body">
    <div class="modal-window">
      <label class="modal-label" for="modal-check">閉じる</label>
      <div class="modal-inner">
        <div class="modal-content">
          モーダルウィンドウの中身
        </div>
      </div>
    </div>
  </div>
</div>

ポイントは2行目の <input type="checkbox"> の位置。

modal-body と隣接する直前にチェックボックスを置くことで、 .modal-check:checked + .modal-body というCSSセレクタでチェックの有無による制御ができます。

チェックボックス本来の仕事をしないマークアップがあるのはどうなん？という議論はありますが今回は考えないことに。

CSS

モーダルウィンドウを形成する部分は省き、表示の仕組みに関わる箇所を挙げます。

.modal .modal-check:checked + .modal-body {
  animation: fadeout .2s 1 forwards, hide .1s .2s 1 forwards;
}
.modal .modal-check:checked + .modal-body .modal-window {
  animation: zoomout .2s 1 forwards;
}

上記HTMLの「閉じる」ボタンになる <label> をクリックすることで .modal-check にチェックが入り、それに隣接する .modal-body および .modal-window を消すためのCSSアニメーションを設定しています。

アニメーションさせない場合は下記のように display:none でバッサリ消しても良いです。

.modal .modal-check:checked + .modal-body {
  display: none;
}

複数の <label> タグで一つのチェックボックスを参照できるので、サンプルの「Redisplay」のように他の箇所から再表示させることもできます。

補足

visibility: hidden によって表示上見えなくなっているだけでDOMには存在するので、気になる人はJS使って消しましょう。