LoginSignup
32

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-12-28

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使って消しましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32