Q&A
前提
JavaScriptでスクロール固定の設定をしたのですが、bodyがスクロールされてしまい動いてしまいます。
Chromeの検証ツールでは以下のメッセージが出ています。
他者が作成したhtmlに手を加えているのですが、staticで検索しても出てきません。
どこでstaticを設定しているのか分かりません。
私の実装はモーダルウィンドウを追加しただけです。
どこがおかしいでしょうか?
モーダルウィンドウが出てきて閉じるまでは出来ました。
後ろのbodyが固定してくれれば完成なのですが、あと1歩が出来ません。
cssが漏れていました。
.fixed {
position: fixed !important;
left:0;
}
を追加したら固定出来たのですが、後ろの画面の表示がおかしくなります。
どうぞご教授願います。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
エラーメッセージ position: static プロパティによって top の適用がブロックされています。 position を static 以外に設定してみてください
該当のソースコード
js
1 2 // 確認画面モーダル 3$(function () { 4 5 // 変数に要素を入れる 6 var open = $('.modal-open'), 7 close = $('.modal-close'), 8 container = $('.modal-container'), 9 scroll_position = 0; 10 // 開くボタンをクリックしたらモーダルを表示する 11 open.on('click', function () { 12 13 // スクロール固定 14 scroll_position = $(window).scrollTop(); 15 $('body').addClass('fixed').css({ 'top': -scroll_position }); 16 container.addClass('active'); 17 18 return false; 19 }); 20 //閉じるボタンをクリックしたらモーダルを閉じる 21 close.on('click', function () { 22 container.removeClass('active'); 23 $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除 24 $(window).scrollTop(scroll_position);//元の位置までスクロール 25 return false;//<a>を無効化 26 }); 27 28 //モーダルの外側をクリックしたらモーダルを閉じる 29 $(document).on('click', function (e) { 30 if (!container.hasClass('active')) { 31 return; 32 } 33 if (!$(e.target).closest('.modal-body').length) { 34 container.removeClass('active'); 35 $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除 36 $(window).scrollTop(scroll_position);//元の位置までスクロール 37 return false;//<a>を無効化 38 } 39 }); 40 });
html
1 2 <footer> 3 <div class="copyright"> 4 <p style="color:#fff;">xxx<button class="modal-open">注意点</button></p> 5 <p>Copyright (C)2023<span>xxxx</span><br class="pc-none">All Rights Reserved.</p> 6 </div> 7 <div class="container"> 8 <div class="footer-catch-image"> 9 <img class="sp-none" src="img/image_big_002_pc.png" alt=""> 10 <img class="pc-none" src="img/image_big_002_sp.png" alt=""> 11 </div> 12 <div class="line-button-block white-button"> 13 <div class="line-button-block-catch-copy">xxx</div> 14 <a class="line-button" href="#"> 15 <i class="fa-brands fa-line"></i> 16 <div> 17 <div class="line-button-block-copy-01">xxx</div> 18 <div class="line-button-block-copy-02">xxx</div> 19 <div class="line-button-block-copy-03">xxx</div> 20 </div> 21 </a> 22 <div class="line-button-block-text">ご質問・ご相談もお気軽にお問い合わせください</div> 23 </div> 24 </div> 25 <!-- モーダル本体(利用規約画面) --> 26 <div class="modal-container"> 27 <div class="modal-body"> 28 <!-- 閉じるボタン --> 29 <div class="modal-close">X</div> 30 <!-- モーダル内のコンテンツ --> 31 <div class="modal-content"> 32 <iframe class="modal-iframe" src="/caution" frameborder="0"></iframe> 33 </div> 34 </div> 35 </div> 36 </footer>
css
1/*モーダルを開くボタン*/ 2.modal-open { 3 color: #fff; 4 margin: auto; 5 cursor: pointer; 6 border: none; 7} 8/*モーダル内のコンテンツの指定*/ 9.modal-content { 10 background: #fff; 11 text-align: left; 12 padding: 30px; 13} 14 15/*モーダル本体の指定 + モーダル外側の背景の指定*/ 16.modal-container { 17 position: fixed; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 text-align: center; 23 background: rgba(0, 0, 0, 50%); 24 padding: 40px 20px; 25 overflow: auto; 26 opacity: 0; 27 visibility: hidden; 28 transition: .3s; 29 box-sizing: border-box; 30 z-index: 100; 31} 32 33/*モーダル本体の擬似要素の指定*/ 34.modal-container:before { 35 content: ""; 36 display: inline-block; 37 vertical-align: middle; 38 height: 100%; 39} 40 41/*モーダル本体に「active」クラス付与した時のスタイル*/ 42.modal-container.active { 43 opacity: 1; 44 visibility: visible; 45} 46 47/*モーダル枠の指定*/ 48.modal-body { 49 position: relative; 50 display: inline-block; 51 vertical-align: middle; 52 max-width: 800px; 53 width: 100%; 54} 55.modal-iframe{ 56 -webkit-overflow-scrolling: touch; 57 overflow: scroll; 58 width: 100% !important; 59 height: 500px !important; 60 margin-bottom: 20px; 61} 62/*モーダルを閉じるボタンの指定*/ 63.modal-close { 64 position: absolute; 65 display: flex; 66 align-items: center; 67 justify-content: center; 68 top: -40px; 69 right: -40px; 70 width: 40px; 71 height: 40px; 72 font-size: 40px; 73 color: #fff; 74 cursor: pointer; 75} 76 77.fixed { 78 position: fixed !important; 79 left:0; 80}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。