HTMLとCSSだけでモーダルウィンドウを作る

サンプルコード

<section class="myModal">
  <input id="myModal_open" type="radio" name="myModal_switch" />
  <label for="myModal_open">開く</label>
  <input id="myModal_close-overlay" type="radio" name="myModal_switch" />
  <label for="myModal_close-overlay">オーバーレイで閉じる</label>
  <input id="myModal_close-button" type="radio" name="myModal_switch" />
  <label for="myModal_close-button"></label>
  <div class="myModal_popUp">
  <div class="myModal_popUp-content">
    <p>本文</p>
  </div>
 </div>
</section>

動作としては開くか閉じるかの二択なのでスイッチとなるラジオボタンは2つと思いきや、3つ作っています。

1. 開くボタン用
2. 閉じるボタン用
3. モーダルウィンドウ外の領域をクリックすることで閉じるオーバーレイ用

Lightbox なんかも元のコンテンツをオーバーレイで覆って（隠して）その上にフローティングさせていますね。このスイッチを兼ねたオーバーレイの有無は利便性において大きなメリットになります。

.myModal_popUp,
input[name="myModal_switch"],
#myModal_open + label ~ label {
  display: none;
}
#myModal_open + label,
#myModal_close-button + label {
  cursor: pointer;
}

.myModal_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open:checked ~ #myModal_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open:checked + label ~ .myModal_popUp {
  background: #fff;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  width: calc(100% - 40px);
  height: calc(100% - 20px - 44px );
  padding: 10px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

#myModal_open:checked + label + #myModal_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}
#myModal_open:checked ~ #myModal_close-button + label::before {
  content: '×';
}
#myModal_open:checked ~ #myModal_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media (min-width: 768px) {
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 600px;
    height: 600px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    margin-left: 240px;
    margin-top: -285px;
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
  }
}

モバイルファーストのレスポンシブデザインですが、スマートフォンを基準にタブレット＆PC ということでブレイクポイントは1つだけ。ユーザビリティの視点で気になるのは閉じるボタンの位置です。

私は電子書籍を読むときくらいしかタブレットを使わないのでアレですが、少なくともスマホは指が届く画面の下半分にあった方がいいのでモーダルウィンドウの下部に。PC は最小化／最大化など各アプリケーションの操作ボタンは上部（Windows は右上、Mac は左上ですね）にあるのでとりあえず右上に配置しています。

デモページではマテリアルデザインっぽくしていますが、カスタマイズ性を保持するため、掲載しているコードは装飾がないプレーンなものです。適宜調整してください。

モーダルウィンドウを用いる注意点

冒頭で例に挙げたように、モーダルウィンドウが使われるシーンはログインやアラートが多いです。

前者はユーザ自身がクリックやタップといったアクションを選択した結果に表示されるもの。後者はユーザがタスクを完了する助けとなるもの。当然のように “ユーザありき” です。ユーザの導線を邪魔してはいけません。

• 背景にまわったコンテンツを視界から隠してしまう
• ユーザに即時対応を求めることになる
• ユーザが行っていた作業を中断させることになる

以上のようなデメリットを孕んでいます。あくまでユーザ自身が選んだ／決めたフローをサポートするものであるべきだと思うので、使いどころは考えないといけませんね。メルマガの登録を促すモーダルが突然現れたり、入力中に「ﾃﾞｨﾝｯ!!!」と表れるダイアログに度肝を抜かれたあと猛烈にむかついた経験は誰にでもあるでしょうから（思い出すともはやいい思い出なのかもしれない）