モーダルウィンドウを jQuery で作ってみる

更新2024/02/13

ページを見ている際に重要な情報を見てもらいたいときに使うモーダルウィンドウ。Webサイトではよく使われるものの1つです。そんなモーダルウィンドウの作り方のメモです。

モーダルウィンドウとは

モーダルウィンドウは表示されている画面の上にさらに新たな画面をかぶせて表示する機能のこと。

モーダルが表示された場合、その画面を閉じるまで元の画面上の操作ができません。
会員登録やコンバージョンページへの誘導など、何かしらその画面でアクションが欲しい場合に使用されます。

【PR】

プログラミング言語の人気オンラインコース

モーダルウィンドウを作ってみる

紹介するモーダルウィンドウはjQueryとCSSで作成します。
モーダルを表示するためのテキストを設置し、クリックするとモーダルが表示されます。「閉じる」またはグレー背景をクリックするとモーダルが非表示になる仕様です。

【実装したコード】

まずは、jQuery CDN から使用するjQueryのコードをコピーして </body> 直前に貼り付けます。このコードの後に使用するjsファイルやscriptタグを記述します。

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

HTMLで書くこと

jQueryの準備ができたら、早速表示させるモーダルを作っていきましょう。モーダル表示に必要なのは以下のものです。

  • モーダルを表示するためのトリガーとなるテキストやボタン
  • 元の画面を覆い被せる要素
  • 表示させたいコンテンツ
  • モーダルを非表示にするためのトリガー

サンプルコードではこのようなHTMLを作成しました。

<!-- モーダルを表示するトリガー -->
<p class="modal_open">クリックしたらモーダル表示</p>

<!-- モーダルの中身 -->
<div class="modal_content">
  <img src="https://komaricote.com/wp-content/uploads/2023/03/sample_image_sp.png" alt="">
  <p class="modal_delete">閉じる</p>
</div>

<!-- 元の画面を覆い被せる要素 -->
<div class="modal_overlay"></div>

クラスはJSやCSSで使用します。分かりやすいクラス名をつけていきましょう。もちろん id でもOK。

モーダルは表示された時に、元の画面を操作できないようにすることがポイントです。元の画面を覆い被せるために以下の部分で空の要素を作成しています。

<div class="modal_overlay"></div>

なぜ画面を覆い被す要素（オーバーレイ）をモーダルの中身と別にしているかというと、背景をクリックした時にも画面が閉じるようにしたいからです。もしこの動作が不要であれば、モーダル要素に背景をつけて全画面表示にしてもいいでしょう。

CSSのポイント

モーダルを表示するときは「スクロールした場所でコンテンツを配置」したいはず。なのでモーダルで表示するものは position: fixed; にします。
またどちらも始めは表示させたくないので、display: none; で非表示にします。

.modal_overlay, .modal_content {
  display: none;
  position: fixed;
}

もしアニメーションをつけたりしたい場合は opacity や visibility といったプロパティを使用した方がいい場合もあります。表示のさせ方によって使い分けてみてください。

要素を非表示にするときに知っておきたいCSSプロパティの使い分け

今回はJS側で「open」というクラスをつけて表示させていきたいので、そのクラスがついたら表示させるようにCSSで設定します。

.modal_overlay.open, .modal_content.open {
  display: block;
}

表示させるコンテンツは画面中央に表示させたいことがほとんどだと思います。そこで表示サイズと表示位置を以下のように設定します。

.modal_content {
  width: 90%;
  max-width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 101;
}

オーバーレイ要素は画面全体に表示させたいので以下のように記述します。

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

z-index で要素のレイヤー順序を指定しています。中身の方を上にしたいので、そちらの数字を大きくします。

JS（jQuery）で実装すること

JS側は表示・非表示の制御を行います。今回はクリックすることをトリガーとしているので、クリックした時にモーダルを表示・非表示にするJSを記述します。

ここでは「特定の要素をクリックしたらモーダルを表示」「閉じる要素をクリックしたら非表示」「モーダルの中身の要素以外の背景部分をクリックしたら非表示」という3つのアクションを用意しています。

$(function(){
  const modal = $('.modal_content');
  const overlay = $('.modal_overlay');
  // 「クリックしたらモーダル表示」をクリックしたらモーダルを表示
  $('.modal_open').on('click', function(){
    modal.addClass("open");
    overlay.addClass("open");
  });
  // 「閉じる」をクリックしたらモーダルを非表示
  $('.modal_delete').on('click', function(){
    modal.removeClass("open");
    overlay.removeClass("open");
  });
  // オーバーレイをクリックしたら非表示
  overlay.on('click', function(){
    modal.removeClass("open");
    overlay.removeClass("open");
  });
});

「HTMLで書くこと」「CSSのポイント」「JS（jQuery）で実装すること」のところで紹介したコードを記述すると最低限のモーダルが完成します。
あとはクリックするテキストやモーダルの中身をサイトに合わせて作り込めば完成です。

関連記事

要素にclassやidを追加する【jQuery】

【PR】

簡単にプラグインでモーダルを作る

そこまで複雑ではないモーダルなら自作して作ってもそこまで手間ではないのですが、コーディングは苦手という人もいると思います。そうでなくても手っ取り早く実装してしまいたい場合はプラグインがやはり便利です。
またアニメーションを入れて表示させたいという場合も、動きのイメージにあったプラグインがあるなら使った方が手間は少ないはず。

さまざなモーダルウィンドウプラグインを紹介している記事があったので、参考になるかと思います。

無料で使えるモーダルウィンドウプラグイン18選。オープンソースの最新モーダルを取り入れよう – Workship MAGAZINE(ワークシップマガジン)

ずっと更新がないものだとコードが古くてエラーが出てしまう可能性が高くなるので、できれば更新があるプラグインがおすすめです。GitHubなどにコードを載せているところがほとんどなので確認してみてください。

カテゴリー : JavaScript

JavaScript関連の記事

TOPへ