モーダル内のコンテンツがスクロールするときでも、背景をコンテンツいっぱいにする
こんにちは！のせっちです！ モーダル内のコンテンツがスクロールするときでも背景を画面いっぱいにする方法をご紹介…
See the Pen modal by Yuki Nose (@yukinouz1) on CodePen.
// モーダル展開時の背景部分 .modal__bgモーダル展開時の黒背景部分のみ抜粋です。 height: 100vh; で高さを画面いっぱいにしています。
$(()=> < const modal = $(".js-modal"); const modalOpen = $(".js-modal-open"); const modalClose = $(".js-modal-close"); modalOpen.on("click", function() < modal.fadeIn(); >); modalClose.on("click", function() < modal.fadeOut(); >); >);()=> はアロー関数といい、今回のケースでは function() と書いているのと同じです。
モーダル内のコンテンツがスクロールする場合
ボタンクリックでモーダルを開くのは同じです。今回はコンテンツがY方向にoverflowしていて、縦スクロールが発生していますね！ それでも、黒背景はコンテンツの最後まで広がっています。
height: 100vh; だと画面の表示部分しか確保できないので、スクロールしていくと黒背景は途切れるはずです。
解説
.modal__bgheight: 100vh; ではなく、 min-height: 100vh; としました。
height: 100vh; では、表示領域分しか高さが取れないので、スクロールしていくと黒背景は途切れます。 なので高さはjavascriptで計算します。
min-height: 100vh; とした理由は、ワイドスクリーンというか、縦長スクリーン対応です。縦長で スクロールがなくなる可能性 があるので、そのときは100vhが適用されるようにしてあげます。
$(() => < const modal = $(".js-modal"); const modalContent = $(".js-modal-content"); const modalBg = $(".js-modal-bg"); const modalOpen = $(".js-modal-open"); const modalClose = $(".js-modal-close"); const body = $("body"); modalOpen.on("click", function() < modal.fadeIn(); body.css(< overflow: "hidden", >); let formheight = modalContent.outerHeight(); modalBg.css(< height: formheight >); >); modalClose.on("click", function() < modal.fadeOut(); body.css(< overflow: "auto", >); modalBg.css(< height: "auto" >); >); >); // 定義省略 modalOpen.on("click", function() < modal.fadeIn(); body.css(< overflow: "hidden", >); formheight = modalContent.outerHeight(); modalBg.css(< height: formheight >); >);クリックでモーダルを fadeIn() させるところまでは基本形と同じです。
formheight = modalContent.outerHeight(); でコンテンツの高さを取得して、 formheight という変数に代入しました。
modalBg.css(); で先ほど計算した黒背景部分のcssでheightを formheight にしてあげます。
こうすることで、 クリックしたときの高さを黒背景の高さにすることができます。
modalClose.on("click", function() < modal.fadeOut(); body.css(< overflow: "auto", >); modalBg.css(< height: "auto" >); >); // 定義省略 $(window).on("resize", function() < formheight = modalContent.outerHeight(); modalBg.css(< height: formheight >); >);$(window).on("resize", function(). でウィンドウのリサイズを検知できます。
モーダル展開時にも formheight を取得しますが、 modalOpen.on("click", function(). なので、クリックしたとき1回だけ取得します。リサイズに対応するには、別で処理を書かないといけません。
まとめ
・モーダル内のコンテンツがスクロールする場合はjsで高さを計算する。・ワイドスクリーン（縦長スクリーン）に対応するために、 min-height: 100vh; を書いておく。・widnowサイズの変更にも対応する。
目次
この記事を書いた人
のせっち福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。 - WordPressが得意！ - 初心者向けGulp教材は購入者100部以上！
gridを使って、PCとSPでコンテンツの表示順を変える例 ブラウザの戻るを押したらモーダルを表示する方法関連記事
【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】 こんにちは！フリーランスWebディレクター兼エンジニアののせっちです。 Javascriptのみでス […]- のせっち
- 2020年6月3日
- プログラミング
- のせっち
- 2022年2月16日
- プログラミング
- のせっち
- 2022年1月19日
- プログラミング
- のせっち
- 2022年1月18日
- プログラミング