ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > JavaScript > 【jQuery】意外と簡単に作れる!モーダルウィンドウの実装方法

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

JavaScript

2022/02/17

2023/04/20

jQuery モーダル記事サムネイル

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

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

この記事で身につく内容
  • jQueryを使ったモーダルウィンドウの作り方

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

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

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

\お申し込みは30秒で終わります。/

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

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

モーダルウィンドウとは

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

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

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

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

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

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

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

この記事で紹介するモーダルウィンドウ実装のポイントは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>

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で制御するために付与しています。

ZeroPlusgate50教材の動画

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

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

<!-- 追記ここから -->
<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でモーダルウィンドウを表示・非表示させる

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

.overlaydisplay: 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で以下のような処理になるように記述します。

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

  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クラス付与
});

$(‘’)で要素を取得しそれぞれ変数に格納します。ボタンをクリックしたら、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クラスを外す
});

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

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

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

まとめ

jQueryでモーダルウィンドウを実装することは、一見難しく感じられるかもしれません。しかし順序よく作成していけば意外と簡単に作成することができます。

  1. HTMLやCSSで、「モーダルウィンドウが表示された状態」と「非表示の状態」を作成する
  2. jQueryでその動きを切り替える処理を作成

という手順で作成することができます。「見た目の作成⇀処理を加える考え方はWebサイトの他のパーツでも同様に適用できるので、ぜひ身に着けてください!

jQueryを使ったモーダルウィンドウ実装まとめ

  • モーダルウィンドウの表示・非表示はjQueryのメソッドを使う
  • HTML、CSSでモーダルウィンドウの表示時・非表示時のスタイルを先に作る
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから