JavaScript

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(); // モーダルを非表示
  });
});

 

まとめ

jQueryを使用すれば、わずかなコードでモーダルウィンドウを作成できます。HTML、CSS、JavaScriptの組み合わせで、見た目も機能も充実したモーダルを簡単に実装できるのでぜひ試してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。