/最終更新日:2019/08/29PICKUPTechniqueCSSjQuery・JSモーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。まとめモーダルウィンドウとは?素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。主な用途は下記になります。ローディングローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使います。アラートやエラーメッセージ重要な操作を行う前の確認メッセージや、ユーザーに操作ミスなどを通知するために使います。広告や画像、動画などのコンテンツをオーバーレイ表示する前述のとおり、会員登録を促すウィンドウで使用されます。Lightboxのように画像や動画のサムネイルをクリックして、大きく表示したい場合にも使われます。メリットユーザーに見せたい情報だけを見せることができます。モーダルウィンドウを閉じない限りは表示されるので、行動を制限することができます。デメリットメリットがそのままデメリットになります。画面全体を覆い、閉じるまで他の作業ができないというのは、ユーザビリティ上よくありません。ユーザーがストレスを感じるのは、ページがロードされると自動で表示されるモーダルウィンドウの広告です。これは正直、何度も続くとイラッとします。結論メリット・デメリット踏まえた上での私の結論ですが、クリックしてユーザーの意思で表示させるなら、メリットだけを活かせますので、私はありだと思っています。実際かなりの頻度で使っています。使い方としては、最近は背景動画を埋め込むことが非常に多くなりましたが、背景動画はミュートで埋め込み、音ありのバージョンをボタンクリックでポップアップさせるためによく使います。実践で使えるものではありませんが、こんなのですよというサンプルです。動画をモーダルウィンドウで表示するサンプル前置きが長くなりましたが、まずはベースのサンプルを見てみてください。サンプル1モーダルウィンドウの基本ではベースのコードを見ていきたいと思います。割愛していますが、「head」内でjQueryを読み込んでいますのでそちらも忘れずに。class="modal__content"><p>ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。href="">閉じる</a></div><!--modal__inner--></div><!--modal--></body>3行目a要素「js-modal-open」をクリックしたらモーダルウィンドウが表示されるように、この後のjQueryで処理していきます。「modal」がモーダルウィンドウ全体の部分になります。6行目モーダルウィンドウを表示している時に背景をクリックしてもモーダルウィンドウを閉じられるように、クリック用の空の背景要素として「modal__bg」を「modal」の中に入れています。「modal__content」の中にモーダルウィンドウで表示したいコンテンツを入れます。クラス名の頭に「js-」と付けているものがありますが、こちらはこの後のjQueryで操作するクラスになります。しておくことで、後で見た時や、他の人が見てもすぐにjQueryで操作しているということがわかります。none」にしておきます。100vh」を指定しています。ちなみに「ボックスの高さをブラウザの高さと合わせる」テクニックは下記の記事に詳しい内容があるので、興味があれば見てみてくださいね。fixed」にして、固定表示にします。先ほどHTMLのところで書いたとおり、モーダルウィンドウを閉じるための背景要素になります。こちらもブラウザの高さと幅に合わせています。absolute」でオッケーです。モーダルウィンドウがオーバレイしてることがわかりやすいように、背景色は「rgba」で半透明にしています。25,27,28,29行目モーダルウィンドウのコンテンツを画面の縦横センターに配置している部分になります。いくつか他のサンプルも見てきましたが、jQueryでコンテンツの幅を取得してやっていたいりしていましたが、そんなことをしなくてもこの4行で画面の縦横センターに配置することができます。50%」を指定すると、ボックスの左上が親要素の縦横センターになります。50%」は親要素の幅と高さに対して50%移動しますが、「transform」は自分の幅と高さに対しての50%移動します。よって下のイメージのように画面の縦横センターに配置することができます。こちらのテクニックは下記の記事に詳しい内容があるので、こちらも興味があればぜひ見てみてください。false;});});jQueryは簡単です。「js-modal-open」をクリックしたら「fadeIn」でモーダルウィンドウを表示し、「js-modal-close」をクリックしたら「fadeOut」で非表示にしています。false」を書かないと、リンク要素として処理され、jQueryの処理ができないので注意しましょう。応用編ベースのモーダルウィンドウはそれほど難しくなかったと思います。ここからはせっかくなので、いくつか応用編をやっていきたいと思います。応用編と言っても、対して高度なことはやらないので、ここまでできた方なら問題ないと思いますので、ぜひ最後まで見ていってください。複数のモーダルさて、ベースのモーダルウィンドウは1つだけだったのであれでよかったですが、表示したいモーダルが複数になるとこれまでのやり方ではダメなので、改良していきます。サンプルをご確認ください。class="modal__content"><p>1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。class="modal__content"><p>2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。href="">閉じる</a></div><!--modal__inner--></div><!--modal--></body>3,4行目a要素「js-modal-open」に「data-target」属性を追加しました。この値をモーダルウィンドウのID属性とリンクさせることで、どのモーダルウィンドウを開くかわかるようにしています。前述のとおり、どのモーダルウィンドウかわかるようにID属性を追加しました。CSSCSSは変化なしです。false;});});jQueryはモーダルウィンドウを開く処理の方だけ変更しました。「js-modal-open」が複数になったので、「each」メソッドの中で「this」を使うことで、どの「js-modal-open」がクリックされたかわかるようにします。4行目そして「data」メソッドで、クリックした「js-modal-open」の「data-target」属性を取得し、変数「target」に代入しています。「data-target」の値はモーダルウィンドウのID属性とリンクさせているので、「document.getElementById(target)」とすることで、モーダルウィンドウが複数あっても表示したいものだけ取得することができます。サンプル2これで複数のモーダルウィンドウがあっても、data-target属性とID属性が正しくリンクできていれば問題なく表示できます。スクロール位置を元に戻すモーダルウィンドウを表示している最中にスクロールしてしまった場合、表示した位置と閉じた時の位置が違うと、ユーザーが戸惑う可能性があります。モーダルウィンドウを閉じたら、表示したスクロールの位置に戻すようにしたいと思います。サンプルをサンプル3モーダルウィンドウを表示したままスクロールして閉じても、開いた時のスクロール位置に戻ります。class="modal__content"><p>1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。class="modal__content"><p>2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。href="">閉じる</a></div><!--modal__inner--></div><!--modal--></body>サンプル2にスクロールができるように「box」を追加しただけです。60%;}同じく「box」のスタイルが増えただけです。false;});});モーダルウィンドウを開く時にスクロール位置の取得と、閉じた時のスクロール位置を戻す処理が追加になっています。2行目スクロール位置の値を入れる変数「winScrollTop」を宣言しています。「$(window).scrollTop()」で画面のスクロール位置(数値)が取得できますので、「js-modal-open」がクリックされたら、「winScrollTop」にスクロール位置を代入します。「js-modal-close」がクリックされたら、取得しておいたスクロール位置まで、アニメーションさせながら移動しています。これで開いた時と閉じた時が同じスクロール位置になりました。動画をモーダルウィンドウで表示する冒頭の方で紹介した動画をモーダルウィンドウで表示するサンプルのソースコードも記載しておきますので、色々遊んでみてください。false;});});サンプルで使用している動画の素材は下記のサイトでダウンロードしています。Pexelsまとめ最後まで読んでいただいた方、お付き合いいただきありがとうございました。モーダルウィンドウに限らずサイトにギミックを取り入れる際は、ユーザビリティも考慮して本当に必要なものを取り入れることで、ユーザーエクスペリエンスが向上するものを取り入れていきたいですね。Day.GALLERYINSPIRATIONCONTACTTGIC。