【JQuery】モーダルウィンドウの作り方！コピペOKなサンプルコード付き

モーダルウィンドウとは？

モーダルウィンドウとは、特定の操作を行なわないと他の画面を操作することができないウィンドウのことです。
元画面の上に別の画面をオーバーレイで表示され、ユーザーへ強制的に確認や操作を促すことができます。
情報を確実に伝えたい場合や特定の操作をさせたい場合には効果的ですが、ユーザーの操作を強制的に制御するため実装する際は注意が必要です。

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

＜ HTML・CSSでモーダルウィンドウのパーツを実装する ＞

モーダルウィンドウに必要なパーツは以下の通りです。
１. クリックしてモーダルウィンドウを表示させるためのボタン
２. オーバーレイ (モーダルウィンドウの背景)※１の上に重ねる
３. モーダルウィンドウ本体※２の上に重ねる
４. モーダルウィンドウを閉じるボタン

＜ JQueryでモーダルウィンドウの動きを実装する ＞

モーダルウィンドウの動きは以下の通りです。
１. ボタンをクリックしたら、モーダルウィンドウとオーバーレイをフェードインで表示する
※モーダルウィンドウとオーバーレイは[display: none;]で非表示にしておきます
２.モーダルが表示されている間、bodyのスクロールを無効にする
３. モーダル内のボタンをクリックorオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイをフェードアウトで非表示にする

プラグインを使って手軽にモーダルウィンドウを実装する

モーダルウィンドウを手軽に実装できるプラグインを紹介します。
実際にモーダルウィンドウを実装しようとすると、オーバーレイを作成したり、クローズボタンを作成したり、裏側のコンテンツをスクロールさせないようにしたり等、細かい構築や配慮が必要で結構手間がかかります。
そんな手間がかかるUIですが、プラグインを使用して作成することでアクセシビリティの確保されたモーダルウィンドウを作成することができます。

＜ Modaal ＞

Modaalは、単純なテキスト表示だけでなく、画像ギャラリーや動画の表示、フォームの送信など様々なコンテンツをモーダルウィンドウとして扱うことができます。
ModaalはjQuery依存のプラグインで、使用するにはjQueryの読み込みが必須になります。
すでにサイト内でjQueryを使用している場合に、おすすめのプラグインです。
本記事のサンプルコードでもModaalプラグインを使用しています。
https://humaan.com/modaal/

＜ Micromodal.js ＞

Micromodal.jsは1.9kbと非常に軽量で、素のJavaScriptで作られています。
シンプルな挙動を実装することができ、デフォルトのスタイルもないためCSSでのカスタマイズもしやすくなっています。
Micromodal.jsはjQueryに依存しないため、モーダルウィンドウのためにjQuery読み込むのは避けたい人におすすめのプラグインです。
https://micromodal.vercel.app/

コピペで使えるモーダルウィンドウのサンプルコード

モーダルウィンドウを実装するメリット・デメリット

モーダルウィンドウの特徴から、以下のようなメリット・デメリットがあります。

ユーザーに確実に情報を伝えることができる

元画面の上に別の画面が表示されるウィンドウの注目度に加え、操作が制限されることで、伝えたい情報をユーザーに確実に認知させることが可能です。

ユーザーに行ってほしい操作を限定できる

指定された動作を完了するまで他の操作ができない特性から、最後まで目的の操作を行ってほしい場合にも活用できます。
例えば、ログイン画面や通販サイトの購入画面などです。

多用するとユーザーへストレスを与える

モーダルウィンドウを頻繁に表示すると、メインの画面が見られないことでユーザーのストレスにつながります。また、モーダルウィンドウを表示する度にユーザーは手を止めなければいけません。
さらに、モーダルウィンドウを閉じて元のページに戻っても、読んでいた場所が分からなくなることがあります。そのため、ユーザーの作業効率の低下につながってしまいます。

ユーザーが離脱してしまう恐れがある

モーダルウィンドウが表示されたら、閉じるボタンを押す、画面内にある選択肢を選択する、文字入力をするなどの操作が必要になります。
そのため、モーダルウィンドウを消す方法が分からないユーザーは、そのままページを離脱してしまうことがあります。

まとめ

モーダルウィンドウは重要である情報の確実な伝達や特定の操作の促進には有効ですが、過度の使用はユーザーにストレスを与えたり、離脱を招いたりする可能性があります。
また、実装する際も配慮すべき点が多くあり、モーダルウィンドウは難しいUIといえます。
効果的に活用するためにも使用場面と実装方法の両方を慎重に考慮して、モーダルウィンドウを作成していきましょう。