モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。

また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます！  

Contents

素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。

モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。  

主な用途は下記になります。

ローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使います。  

重要な操作を行う前の確認メッセージや、ユーザーに操作ミスなどを通知するために使います。  

前述のとおり、会員登録を促すウィンドウで使用されます。また、Lightboxのように画像や動画のサムネイルをクリックして、大きく表示したい場合にも使われます。  

ユーザーに見せたい情報だけを見せることができます。また、モーダルウィンドウを閉じない限りは表示されるので、行動を制限することができます。  

メリットがそのままデメリットになります。画面全体を覆い、閉じるまで他の作業ができないというのは、ユーザビリティ上よくありません。

特にユーザーがストレスを感じるのは、ページがロードされると自動で表示されるモーダルウィンドウの広告です。これは正直、何度も続くとイラッとします。  

メリット・デメリット踏まえた上での私の結論ですが、クリックしてユーザーの意思で表示させるなら、メリットだけを活かせますので、私はありだと思っています。実際かなりの頻度で使っています。

使い方としては、最近は背景動画を埋め込むことが非常に多くなりましたが、背景動画はミュートで埋め込み、音ありのバージョンをボタンクリックでポップアップさせるためによく使います。

実践で使えるものではありませんが、こんなのですよというサンプルです。

前置きが長くなりましたが、まずはベースのサンプルを見てみてください。

ではベースのコードを見ていきたいと思います。割愛していますが、「head」内でjQueryを読み込んでいますのでそちらも忘れずに。

ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。

a要素「js-modal-open」をクリックしたらモーダルウィンドウが表示されるように、この後のjQueryで処理していきます。  

「modal」がモーダルウィンドウ全体の部分になります。  

モーダルウィンドウを表示している時に背景をクリックしてもモーダルウィンドウを閉じられるように、クリック用の空の背景要素として「modal__bg」を「modal」の中に入れています。  

「modal__content」の中にモーダルウィンドウで表示したいコンテンツを入れます。

クラス名の頭に「js-」と付けているものがありますが、こちらはこの後のjQueryで操作するクラスになります。 こうしておくことで、後で見た時や、他の人が見てもすぐにjQueryで操作しているということがわかります。  

モーダルウィンドウ全体をラップする「modal」は、jQueryで表示・非表示を操作するので、初期状態は「display: none」にしておきます。  

モーダルウィンドウの高さをブラウザの高さと合わせるため「height: 100vh」を指定しています。

ちなみに「ボックスの高さをブラウザの高さと合わせる」テクニックは下記の記事に詳しい内容があるので、興味があれば見てみてくださいね。

「position: abusolute」ではスクロールした際にモーダルウィンドウもスクロールされて見えなくなってしまうので「position: fixed」にして、固定表示にします。  

先ほどHTMLのところで書いたとおり、モーダルウィンドウを閉じるための背景要素になります。こちらもブラウザの高さと幅に合わせています。

親要素の「modal」に「position: fixed」が指定されているので、こちらは「position: absolute」でオッケーです。 また、モーダルウィンドウがオーバレイしてることがわかりやすいように、背景色は「rgba」で半透明にしています。  

モーダルウィンドウのコンテンツを画面の縦横センターに配置している部分になります。 いくつか他のサンプルも見てきましたが、jQueryでコンテンツの幅を取得してやっていたいりしていましたが、そんなことをしなくてもこの4行で画面の縦横センターに配置することができます。  

「position: absolute」を指定した上で、「left: 50%」と「top: 50%」を指定すると、ボックスの左上が親要素の縦横センターになります。

そして、さらに「transform: translate(-50%,-50%)」とすると、「left: 50%」と「top: 50%」は親要素の幅と高さに対して50％移動しますが、「transform」は自分の幅と高さに対しての50％移動します。よって下のイメージのように画面の縦横センターに配置することができます。

こちらのテクニックは下記の記事に詳しい内容があるので、こちらも興味があればぜひ見てみてください。

jQueryは簡単です。「js-modal-open」をクリックしたら「fadeIn」でモーダルウィンドウを表示し、「js-modal-close」をクリックしたら「fadeOut」で非表示にしています。  

a要素の場合は「return false」を書かないと、リンク要素として処理され、jQueryの処理ができないので注意しましょう。  

ベースのモーダルウィンドウはそれほど難しくなかったと思います。ここからはせっかくなので、いくつか応用編をやっていきたいと思います。

応用編と言っても、対して高度なことはやらないので、ここまでできた方なら問題ないと思いますので、ぜひ最後まで見ていってください。  

さて、ベースのモーダルウィンドウは1つだけだったのであれでよかったですが、表示したいモーダルが複数になるとこれまでのやり方ではダメなので、改良していきます。

まずはサンプルをご確認ください。

1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。

2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。

a要素「js-modal-open」に「data-target」属性を追加しました。この値をモーダルウィンドウのID属性とリンクさせることで、どのモーダルウィンドウを開くかわかるようにしています。  

前述のとおり、どのモーダルウィンドウかわかるようにID属性を追加しました。  

CSSは変化なしです。  

jQueryはモーダルウィンドウを開く処理の方だけ変更しました。  

「js-modal-open」が複数になったので、「each」メソッドの中で「this」を使うことで、どの「js-modal-open」がクリックされたかわかるようにします。  

そして「data」メソッドで、クリックした「js-modal-open」の「data-target」属性を取得し、変数「target」に代入しています。  

「data-target」の値はモーダルウィンドウのID属性とリンクさせているので、「document.getElementById(target)」とすることで、モーダルウィンドウが複数あっても表示したいものだけ取得することができます。

では改めてサンプルです。

これで複数のモーダルウィンドウがあっても、data-target属性とID属性が正しくリンクできていれば問題なく表示できます。  

モーダルウィンドウを表示している最中にスクロールしてしまった場合、表示した位置と閉じた時の位置が違うと、ユーザーが戸惑う可能性があります。ですので、モーダルウィンドウを閉じたら、表示したスクロールの位置に戻すようにしたいと思います。  

ではまたサンプルを

モーダルウィンドウを表示したままスクロールして閉じても、開いた時のスクロール位置に戻ります。  

1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。

2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。

サンプル2にスクロールができるように「box」を追加しただけです。  

同じく「box」のスタイルが増えただけです。  

モーダルウィンドウを開く時にスクロール位置の取得と、閉じた時のスクロール位置を戻す処理が追加になっています。  

スクロール位置の値を入れる変数「winScrollTop」を宣言しています。  

「$(window).scrollTop()」で画面のスクロール位置（数値）が取得できますので、「js-modal-open」がクリックされたら、「winScrollTop」にスクロール位置を代入します。  

「js-modal-close」がクリックされたら、取得しておいたスクロール位置まで、アニメーションさせながら移動しています。これで開いた時と閉じた時が同じスクロール位置になりました。  

冒頭の方で紹介した動画をモーダルウィンドウで表示するサンプルのソースコードも記載しておきますので、色々遊んでみてください。

サンプルで使用している動画の素材は下記のサイトでダウンロードしています。 Free stock photos · Pexels  

最後まで読んでいただいた方、お付き合いいただきありがとうございました。

モーダルウィンドウに限らずサイトにギミックを取り入れる際は、ユーザビリティも考慮して本当に必要なものを取り入れることで、ユーザーエクスペリエンスが向上するものを取り入れていきたいですね。  

それでは良いWEBデザイン日和を！Have a nice WEBDESIGNDAY!