blog

トップ  コーディング  【初心者向け】モーダルウィンドウをjQueryで簡単に作る方法

【初心者向け】モーダルウィンドウをjQueryで簡単に作る方法

コーディング 2022.08.23

今回は、jQueryを使って、基本的なモーダルウィンドウを作る方法について、解説していきます。

コンテンツ

モーダルウィンドウとは
モーダルウィンドウの実装方法
まとめ

モーダルウィンドウとは

モーダルウィンドウ（モーダル）とは、親ウィンドウに対する子ウィンドウのことです。
一旦モーダルウィンドウを開くと、「閉じる」ボタンを押すなど何らかの操作が完了するまで開き続け、その間親ウィンドウの操作ができなくなります。

ユーザーにある特定の操作をさせたり、確認してもらいたいときにモーダルウィンドウは効力を発揮します。

モーダルウィンドウの実装方法

実装サンプル

See the Pen
【jQuery】モーダルウィンドウ by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.

基本的なモーダルウィンドウのサンプルをご用意しました。
実際にボタンをクリックして、モーダルウィンドウの動作を確認してみてください。

モーダルウィンドウを閉じる際、ボタンではなく外側のグレーの部分をクリックしても閉じるようになっています。

codepenの左上にあるHTML,CSS,JSのタブをクリックすると、それぞれのソースコードを見ることができます。

HTML

<!-- モーダルを開いた時の外側のレイヤー -->
<div class="over-lay"></div>

<div class="wrapper">
　<!--   モーダルを開くボタン -->
  <button class="modal-open-btn">
    モーダルウィンドウを開く
  </button>
　<!--   モーダルウィンドウ -->
  <div class="modal">
    <h2>モーダルウィンドウです。</h2>
    <p>ここにはコンテンツが入ります。</p>
    <button class="modal-close-btn">閉じる</button>
  </div>
</div>

モーダルウィンドウを実装するために、まずは下記３つのブロックを用意します。
その後、CSSで装飾を行います。

モーダルを開くボタン
モーダルウィンドウ本体
モーダルを開いた時の外側のレイヤー

CSS

/* モーダルを開いた時の外側のレイヤー */
.over-lay {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #999;
  opacity: 0.7;
}

/* モーダルウィンドウ */
.modal {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);//topとleftの指定と併せて、上下左右真ん中にします。
  max-width: 400px;
  width: 80%;
  padding: 30px;
  background-color: #fff;
}

/* モーダルを開いたとき */
.modal.active,
.over-lay.active {
  display: block;
}

最初モーダルウィンドウとレイヤーは非表示にします。
クリックイベントによって、それぞれにactiveクラスを付与したり外したりすることによって、表示非表示を切り替えます。
activeクラスの付け外しはjQueryで行います。

jQuery

$(function() {
  
  // モーダルウィンドウを開くとき
  $('.modal-open-btn').on(
    'click', function() {
    $('.modal, .over-lay').addClass('active');
  });
  
  // モーダルウィンドウを閉じるとき
  $('.modal-close-btn, .over-lay').on(
    'click', function() {
    $('.modal, .over-lay').removeClass('active');
  });
});

jQueryに書くコードはとてもシンプルです。
ボタンやレイヤーをクリックした際に、クラスを付けたり外したりします。

これだけで、簡単なモーダルウィンドウを実装することができます。

もう一度サンプルを見て、動作を確認してみてください。

See the Pen
【jQuery】モーダルウィンドウ by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.