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

前提

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件

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