モーダルウィンドウの作り方【jQuery】

この記事の前提条件

対象: jQuery(既存のjQuery環境での実装を想定)
難易度: ★★☆
所要時間: 約10分

画像の拡大表示や確認ダイアログなど、画面全体を覆って表示するモーダルウィンドウ。既存サイトでjQueryを使っている場合の、シンプルな実装方法を紹介します。

目次非表示

HTML・CSS: 背景の暗幕とモーダル本体を用意する
jQuery: 開閉の処理を書く
実務での注意点: モーダル表示中は背景のスクロールを止める
まとめ

HTML・CSS: 背景の暗幕とモーダル本体を用意する

<button class="modal-open-btn">開く</button>

<div class="modal-overlay">
  <div class="modal-box">
    <button class="modal-close-btn">×</button>
    <p>モーダルの中身</p>
  </div>
</div>

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.modal-overlay.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

jQuery: 開閉の処理を書く

$('.modal-open-btn').on('click', function() {
  $('.modal-overlay').addClass('is-active');
});

$('.modal-close-btn, .modal-overlay').on('click', function(e) {
  // モーダル本体(.modal-box)のクリックでは閉じないようにする
  if (e.target === this) {
    $('.modal-overlay').removeClass('is-active');
  }
});

e.target === thisの判定がポイントです。これがないと、モーダルの中身をクリックしただけでもイベントが親要素(暗幕)まで伝わり(バブリング)、意図せず閉じてしまいます。「クリックされたのが暗幕自身、または閉じるボタン自身の時だけ」閉じる、という条件にしておきます。

💡 今はHTML標準のdialog要素という選択肢もある

既存サイトの改修ならjQueryでの実装が手早いですが、新しく作るページであれば<dialog>というHTML標準のタグも検討する価値があります。showModal()で開き、close()で閉じるだけで、背景の暗幕表示・キーボードのEscキーでの閉じる操作・フォーカスの管理まで、ブラウザが標準機能として面倒を見てくれます。全モダンブラウザで利用できるようになっているので、jQuery自体が不要なプロジェクトなら、こちらの方が実装量も少なく済みます。