Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
32
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@KazuyoshiGoto

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
32
Help us understand the problem. What is going on with this article?