JQueryで作る汎用パーツ編③

テキスト目次 > JQueryの基礎 >　JQueryで作る汎用パーツ編③

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

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

目次

モーダルウィンドウとは

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

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

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

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title> Document </title>
</head>

<body>
  <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>


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

  <script src="main.js"></script>
</body>

</html>
HTML
.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;
}

.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);
}

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


.overlay.open {
  display: block;
}

.modal.open {
  display: block;
}
CSS
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"); // overlayクラスからopenクラスを外す
  overlay.removeClass("open"); // overlayクラスからopenクラスを外す
});
JavaScript

出力結果

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

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

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

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

  1. オレンジのボタンをクリックすると、モーダルウィンドウ画面とグレーの背景が表示される。
  2. ×ボタンをクリックすると、グレー背景とモーダルウィンドウが閉じる。
  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>
HTML

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

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

HTMLとCSSでボタンを作る

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

 <button class="modal-open" id="js-open">モーダルウィンドウオープン</button>
HTML
.modal-open {
  cursor: pointer;
  background: orange;
  border: orange;
  color: #fff;
  padding: 10px 12px;
}
CSS

出力結果

ボタンには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>
HTML
.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);
}
CSS

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

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

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

モーダルウィンドウを閉じるための「×」ボタンは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>
HTML
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: grey;
  opacity: .6;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
}
CSS

モーダルウィンドウと同じように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; /** 追記 **/
}
CSS

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

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

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

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

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

  1. ボタンをクリック
  2. 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クラス付与
});
JavaScript

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

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

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

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

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

  1. ×ボタンをクリック
  2. 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クラスを外す
});
JavaScript

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

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

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

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP