jQueryでモーダルウィンドウをさくっと作る

この記事では、jQueryを利用してモーダルウィンドウをさくっと作成する方法をご紹介します。

モーダルウィンドウの作成例

この記事で作成するモーダルウィンドウの作成例です。

See the Pen
jQuery-モーダルウィンドウ by りん@エンジニア (@rinblog0408)
on CodePen.

モーダルウィンドウのHTML構造を作成する

モーダルウィンドウを表示するために、HTML内にモーダルのコンテンツを定義する必要があります。例として、以下のような構造を作成しましょう。

今回はjQueryを使ったモーダルウィンドウなので、jQueryのライブラリを読み込みも記述しておきます。

<div id="myModal" class="modal">
  <div class="modal-content">
    <div>
      <p>モーダルのコンテンツをここに追加</p>
    </div>
    <button id="closeModalBtn">閉じる</button>
  </div>
</div>

<button id="openModalBtn">モーダルを開く</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSSスタイルの追加

モーダルウィンドウを見栄え良く表示するために、CSSスタイルを追加します。ここでは簡単な例を示します。

.modal {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* モーダル背景の半透明な黒 */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}

jQueryを使用してモーダルを表示する

以下のjQueryコードを追加すると、ページ内の特定の要素をクリックするとモーダルウィンドウが表示されるようになります。

$(document).ready(function() {
  $("#openModalBtn").click(function() {
    $("#myModal").show(); // モーダルを表示
  });
});

$(document).ready(function() {
  $("#openModalBtn").click(function() {
    $("#myModal").show();
  });
  
  $("#closeModalBtn").click(function() {
    $("#myModal").hide(); // モーダルを非表示
  });
});