ZeroPlus Media > Web制作 > JavaScript > 【jQuery】意外と簡単に作れる！モーダルウィンドウの実装方法

【jQuery】意外と簡単に作れる！モーダルウィンドウの実装方法

JavaScript

2022/02/17

2023/04/20

この記事では「jQueryを使ったモーダルウィンドウの作り方」について解説します。モーダルウィンドウは会員登録や警告メッセージなど大事な情報をユーザーに見てもらいたいときに使われます。

Webサイトでよく使われるパーツの1つで、適切に使用すれば有効なUIコンポーネントとなります。

この記事で身につく内容

jQueryを使ったモーダルウィンドウの作り方

JavaScriptが難しくて挫折しそうなあなたへJavaScriptは独学で進めると難しい内容も多いですよね。相談相手がいないと煮詰まってしまうこともあるかと思います。

もし学習の進め方について悩まれているならば、ZeroPlusの無料相談会への参加をお勧めします。

ZeroPlusはWeb制作のフリーランス育成に特化したプログラミングスクールです。超フレンドリーなメンターがあなたの疑問や悩みについて、なんでもお答えします。

＼お申し込みは30秒で終わります。／

まずは無料で相談してみる

学習方法の悩み、私たちと一緒に解消しましょう！

モーダルウィンドウとは
- モーダルウィンドウ実装のポイント
モーダルウィンドウを実装してみよう！
まとめ

モーダルウィンドウとは

モーダルウィンドウとは、ボタンを押すと元の画面の上に新たなウィンドウ画面が表示される機能のことです。

モーダルウィンドウはポップアップと非常に似ています。ポップアップの場合は他のウィンドウを開くことができますが、モーダルウィンドウはその画面で操作を終えないと画面を遷移することができません。

会員登録画面などモーダルウィンドウで実装される場合が多いです。その操作を完了するか操作をキャンセルするまで他の操作をできなくする「操作の制御」の役割があります。

サンプルコードと動きを確認してみましょう。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

オレンジ色のボタンをクリックすると画面中央に新たなウィンドウ画面が表示されます。この機能のことをモーダルウィンドウといいます。

モーダルウィンドウ実装のポイント

この記事で紹介するモーダルウィンドウ実装のポイントは3点あります。

モーダルウィンドウ実装ポイント

オレンジのボタンをクリックすると、モーダルウィンドウ画面とグレーの背景が表示される。
×ボタンをクリックすると、グレー背景とモーダルウィンドウが閉じる。
モーダルウィンドウが表示されている間、オレンジのボタンはクリックできない。

モーダルウィンドウとグレー背景の表示・非表示やボタンをクリックしたときの制御はCSSとjQueryの組み合わせで実装していきます。

モーダルウィンドウを実装してみよう！

ここからはモーダルウィンドウの実装をしていきます。HTMLとCSSでコーディングした後、jQueryで動きを付けていきます。

jQueryの準備

今回はjQueryを使用するのでjQuery CDNからjQueryのCDNをコピーして、bodyタグの直前に貼り付けます。

jQueryのCDNをbodyタグの直前に貼り付ける

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

jQueryの記述は、main.jsファイルに記述していきます。なのでjQueryを記述していくファイルの直前にjQueryのCDNを読み込みます。

これでjQueryを使用する準備ができました。

HTMLとCSSでボタンを作る

ボタンをクリックしたらモーダルウィンドウを表示するボタンをHTMLとCSSで作成します。

  <button class="modal-open" id="js-open">モーダルウィンドウオープン</button>

.modal-open {
  cursor: pointer;
  background: orange;
  border: orange;
  color: #fff;
  padding: 10px 12px;
}

出力結果

ボタンにはid="js-open"を付与します。こちらのid属性はjQueryで制御するために付与しています。

モーダルウィンドウを作る

モーダルウィンドウ部分を作っていきます。

<!-- 追記ここから -->
<div class="modal" id="js-modal">
  <div class="modal-close__wrap">
    <button class="modal-close" id="js-close">
      <span></span>
      <span></span>
    </button>
  </div>
  <p>コンテンツ・内容が入ります。</p>
</div>
<!-- 追記ここまで -->
button class="modal-open" id="js-open">モーダルウィンドウオープン</button>

.modal {
  width: 65%;
  height: 80%;
  border: 1px solid #000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  display: none;
}

.modal p {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 14px;
}

.modal-close__wrap {
  position: absolute;
  right: 40px;
  top: 20px;
}

.modal-close {
  background: transparent;
  border-color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 28px;
  display: block;
  height: 28px;
}

.modal-close span {
  position: relative;
  width: 100%;
  height: 1px;
  background: black;
  display: block;
}

.modal-close span:nth-child(1) {
  transform: rotate(45deg);
}

.modal-close span:nth-child(2) {
  transform: rotate(-45deg);
}

モーダルウィンドウのHTML/ CSSについて簡易的な解説

モーダルウィンドウを画面中央に固定配置したいので、position: fixed;とtransformを用いて上下中央に配置します。

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

モーダルウィンドウを閉じるための「×」ボタンはbuttonタグで作成します。
線はspanタグで作成し、width:100%; height: 1px;に背景色を黒にして表現しています。

作成した線をtransform: rotate();で×になるように調整しています。

後ほどjQueryで制御するので、class名modalが付与されているdivタグにはid="js-modal"を付与します。

モーダルウィンドウの外側背景をつくる

モーダルウィンドウの外側（グレーの部分）をつくります。

<!-- 追記ここから -->
<div class="overlay" id="js-overlay"></div>
<!-- 追記ここまで -->
<div class="modal" id="js-modal">
  <div class="modal-close__wrap">
    <button class="modal-close" id="js-close">
      <span></span>
      <span></span>
    </button>
  </div>
  <p>コンテンツ・内容が入ります。</p>
</div>
<button class="modal-open" id="js-open">モーダルウィンドウオープン</button>

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: grey;
  opacity: .6;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
}

モーダルウィンドウと同じようにposition:fixed;で背景を固定します。class名overlayが付与されているdivタグにはid="js-overlay"を付与します。

jQueryでモーダルウィンドウを表示・非表示させる

モーダルウィンドウと背景が同時に表示されています。

.overlayにdisplay: none;を追加し、背景を非表示にする記述をします。

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: grey;
  opacity: .6;
  display: none; /** 追記 **/
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
}

.modal {
  width: 65%;
  height: 80%;
  border: 1px solid #000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  display: none; /** 追記 **/
}

これでボタンだけが画面に表示されている状態になります。

そしてclass名modalとoverlayが付与されている要素にopenクラスが付いたらそれぞれ表示される記述をCSSに追加します。

.overlay.open {
  display: block;
}
.modal.open {
  display: block;
}

次に、jQueryで以下のような処理になるように記述します。

モーダルウィンドウを表示する処理

ボタンをクリック
modalクラスとoverlayクラスにopenクラスを付与する

main.jsに下記の記述をします。

const modal = $("#js-modal");
const overlay = $("#js-overlay");
const open = $("#js-open");

open.on('click', function () { //ボタンをクリックしたら
  modal.addClass("open"); // modalクラスにopenクラス付与
  overlay.addClass("open"); // overlayクラスにopenクラス付与
});

$(‘’)で要素を取得しそれぞれ変数に格納します。ボタンをクリックしたら、addClassメソッドによってopenクラスを付与します。

addClassはjQueryのメソッドの1つで、任意の要素にクラス属性を追加することができます。

ボタンをクリックすればmodalクラスとoverlayクラスにそれぞれopenクラスが付与されます。
CSSでdisplay:none;からdisplay: block;に上書きされて画面中央にモーダルウィンドウとグレー背景が表示されます。

次に×ボタンを押したらモーダルウィンドウを非表示にする処理を記述します。

モーダルウィンドウを非表示にする処理

×ボタンをクリック
modalクラスとoverlayクラスからopenクラスを外す

const modal = $("#js-modal");
const overlay = $("#js-overlay");
const close = $("#js-close"); // 追記
const open = $("#js-open");

open.on('click', function () { //ボタンをクリックしたら
  modal.addClass("open"); // modalクラスにopenクラス付与
  overlay.addClass("open"); // overlayクラスにopenクラス付与
});

// 追記
close.on('click', function () { //×ボタンをクリックしたら
  modal.removeClass("open"); // modalクラスからopenクラスを外す
  overlay.removeClass("open"); // overlayクラスからopenクラスを外す
});

×ボタンをクリックしたら、removeClassメソッドによってopenクラスを外します。

removeClassはaddClassと同様にjQueryのメソッドの一つです。removeClassは、任意の要素からクラス属性を外すことができます。

これでモーダルウィンドウの実装ができました！