前提
JavaScriptでスクロール固定の設定をしたのですが、bodyがスクロールされてしまい動いてしまいます。
Chromeの検証ツールでは以下のメッセージが出ています。
他者が作成したhtmlに手を加えているのですが、staticで検索しても出てきません。
どこでstaticを設定しているのか分かりません。
私の実装はモーダルウィンドウを追加しただけです。
どこがおかしいでしょうか？
モーダルウィンドウが出てきて閉じるまでは出来ました。
後ろのbodyが固定してくれれば完成なのですが、あと1歩が出来ません。
cssが漏れていました。
.fixed {
position: fixed !important;
left:0;
}
を追加したら固定出来たのですが、後ろの画面の表示がおかしくなります。
どうぞご教授願います。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
発生している問題・エラーメッセージ
エラーメッセージ position: static プロパティによって top の適用がブロックされています。 position を static 以外に設定してみてください
該当のソースコード
js
12 // 確認画面モーダル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
12 <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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント