Help us understand the problem. What is going on with this article?

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

KazuyoshiGoto
UI/UXエンジニア。デザイン、サービス設計、機能(UI)設計、サーバサイド、SEO、ウェブマーケティングなどWebの全般に関わり、現在はBtoBの領域中心にWebとユーザーのふれあい方(体験:UX)に関して垣根なく取り組んでいます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした