【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

jQueryでHTMLをオーバーレイ表示させる方法が知りたい
オーバーレイ（モーダル）を実装する時ってどんなHTML、CSSを書けばいいの…？
実際のWebサイトでオーバーレイが使われている部分を見たい
シンプルなオーバーレイのサンプルコードが見たい

という方のお悩みを解決します！

この記事で紹介する「基本的なオーバーレイの作り方」を実践すれば、サクッとシンプルなオーバーレイを実装できるようになります！

実際の案件でもよく使われる仕様ですので、この記事で基礎を覚えてスキルアップに繋げましょう〜

オーバーレイとは？
オーバーレイの実例（猿田彦珈琲公式サイト）
オーバーレイの作り方
HTML
CSS
Javascript
オーバーレイ（モーダル）のサンプル
まとめ

オーバーレイとは？

オーバーレイには「薄く覆う」という意味があり、Web制作では要素を重ねて表示することを指します。

身近な例を挙げると、ページを訪問して数秒後に表示されるポップアップ広告や画像をタップした際に拡大表示されるモーダルウィンドウを実装する際に使われることが多いです。

ポップアップ、ダイアログ、モーダルウィンドウこれらとオーバーレイはハッピーセットです。

オーバーレイの実例（猿田彦珈琲公式サイト）

オーバーレイについて少し触れたところで、次は実際のWebサイトでどういった形で使用されているのか見てみましょう。

ぼくが大好きで毎日足繁く通っている猿田彦珈琲の公式サイトのメニュー一覧ページが例です。

ドリッピコーヒーやカフェラテといったドリンクメニューの画像をタップすると、商品の詳細情報が画面中央にオーバーレイで表示されます。

オーバーレイ部分をタップするかもしくは、右上の☓ボタンで閉じることができるといった仕様です。

上記の例はスライドショーも組み合わせて実装されているので作るには少し手間がかかります（汗）

モーダル × スライドショーの解説記事も追々公開できればと思います。

参考メニュー東京・恵比寿のスペシャリティ・コーヒー専門店 | 猿田彦珈琲

オーバーレイの作り方

シンプルなオーバーレイを使ったモーダルウィンドウを実装するコードを紹介します。

仕様は以下です。

「開く」をタップするとモーダルを開かせる
モーダルの中身は画面中央に配置
オーバーレイをタップするとモーダルを閉じる

実際に作る際にHTML構造など参考にしていただければ幸いです。

HTML

開くボタンのHTML

<div class="JS_Click_ShowModal_Trigger">開く</div>

オーバーレイのHTML

<div class="ModalLayer">
  <div class="ModalLayer-Mask"></div>
  <div class="ModalLayer-Inner">
    <div class="ModalSection">
      <div class="Modal">
        <div class="Modal-Inner">
          <div class="Modal-Inner-Headline">
            タイトル
          </div>
          <div class="Modal-Inner-Text">
            テキストテキスト
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

オーバーレイのCSS

/* ---------------------------- */
/* --- ModalSection --- */
/* ---------------------------- */
.ModalLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 0.65s;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
}
.ModalLayer.isShow {
  transition: opacity 0.65s;
  pointer-events: auto;
  opacity: 1;
}
.ModalLayer-Mask {
  position: absolute;
  background: rgba(123,123,123,0.5);
  width: 100%;
  height: 100vh;
}
.ModalLayer-Inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 500px;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .ModalLayer-Inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.ModalSection {
  background: #fff;
}
.Modal-Inner {
  border-top: 3px solid #5bc8ac;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  max-width: 500px;
}
.Modal-Inner-Headline {
  text-align: center;
  font-size: 24px;
}
.Modal-Inner-Text {
  text-align: center;
}

Javascript

オーバーレイのJavascript

// 「開く」をタップでモーダル開く
$('.JS_Click_ShowModal_Trigger').on('click', function(){
  $('.ModalLayer').addClass('isShow');
});
// オーバーレイをタップでモーダル閉じる
$('.ModalLayer-Mask').on('click', function(){
  $('.ModalLayer').removeClass('isShow');
});

オーバーレイ（モーダル）のサンプル

See the Pen
OJVEWzy by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

上記で紹介した「基本的なオーバーレイの作り方」を実践すれば、サクッとシンプルなオーバーレイを実装できるようになります。

まずはコピペで動くのを確認して、それから自分でどんどんカスタマイズしていっていただければ幸いです。

「Vue.jsでモーダルウィンドウを実装する方法も知りたい！」

という意欲溢れる方は以下の記事にも目を通してみてください〜

【Vue.jsで作るモーダル】複数のVueインスタンス間でイベントを共有する方法