質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

800閲覧

モーダルウィンドウを開いたら、後ろのbodyがスクロールしてしまいます

fullmoon311

総合スコア62

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/01/23 08:27

編集2023/01/23 18:05

前提

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

modal表示中はスクロール系の処理をとめればよいのでは?

javascript

1<script> 2const noscroll=e=>e.preventDefault(); 3const scrollEvents=["touchmove","wheel","mousewheel","scroll"]; 4window.addEventListener('DOMContentLoaded', ()=>{ 5 openBtn.addEventListener('click', e=>{ 6 modal.showModal(); 7 scrollEvents.forEach(e=>document.addEventListener(e,noscroll,{passive:false})); 8 }); 9 closeBtn.addEventListener('click', e=>{ 10 modal.close(); 11 scrollEvents.forEach(e=>document.removeEventListener(e,noscroll,{passive:false})); 12 }); 13}); 14</script> 15<dialog id="modal">test 16<input type="button" value="close" id="closeBtn"> 17</dialog> 18<input type="button" value="modal open" id="openBtn"> 19<br><br><br><br><br><br><br><br><br><br> 20<br><br><br><br><br><br><br><br><br><br> 21<br><br><br><br><br><br><br><br><br><br> 22<br><br><br><br><br><br><br><br><br><br> 23<br><br><br><br><br><br><br><br><br><br> 24scroll

投稿2023/01/23 09:05

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問