モーダルが開いているときにスクロールを無効にする方法 - フルページ JS

Question

私がやりたいのは、モーダルが開いているときにページ全体の JavaScript スクロールを無効にすることです。問題は、モーダルを開いてスクロールしようとすると、実際の Web ページであるコンテンツがモーダルの背後に移動するため、これを無効にしたいということです。モーダルを開いたとき、背景は固定されているはずです。

<div id="fullpage">
            <div class="セクション">
                <?php include './home-page/home-page-manufacturing-list.php';?>
                <button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">モーダル ボックスを開く</button>
            </div>
    
    
    </div>


<div id="id01" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container">
            <span onclick="closeModal('modal01')" class="w3-button w3-display-topright">&times;</span>


            <div class="コンテナ背景フィルター">
                <div class="行">
                    <div class="col-12">
                        <h3 class="セクションタイトル"></h3>
                    </div>
                    <div class="col-12">
                        <h5>当社では木工に対する情熱を持っており、それはすべての製造およびインテリア デザイン プロジェクトに反映されています。当社は、機能的でありながら美しいカスタム木製家具、備品、アクセントの作成を専門としています</h5>
                    </div>
                </div>
            </div>


            
        </div>
    </div>
</div>


<スクリプト>
    $(document).ready(function() {
        var isModalOpen = false;

        // モーダルが開いているときに FullPage.js のスクロールを無効にする
        関数 disableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // モーダルが閉じているときに FullPage.js のスクロールを有効にする
        関数enableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        //モーダルボックスを開く
        関数 openModal(modalId) {
            document.getElementById(modalId).style.display = 'ブロック';
            isModalOpen = true;
            disableFullPageScroll();
        }

        // モーダルボックスを閉じます
        関数 closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
            isModalOpen = false;
            EnableFullPageScroll();
        }

        // モーダルを開いたり閉じたりするためのボタンのクリック イベントを処理します
        $('#openModalButton').on('click', function() {
            openModal('id01'); // 'id01' をモーダルの ID に置き換えます
        });

        $('#closeModalButton').on('click', function() {
            closeModal('id01'); // 'id01' をモーダルの ID に置き換えます
        });

        // スクロールイベントを処理する
        $(ウィンドウ).on('スクロール', 関数(イベント) {
            if (isModalOpen) {
                イベント.preventDefault();
                イベント.stopPropagation();
            }
        });
    });
</script>

Answer 1

あなたが提供したコードは、モーダルを開いたときにスクロールを無効にするのが正しいようです。ただし、問題の原因はいくつか考えられます:

1. モーダル ボックスを開くボタンは、スクリプトで定義した openModal 関数を使用しません。代わりに、モーダルのスタイルを直接操作します。これは、isModalOpen 変数が true に設定されておらず、disableFullPageScroll 関数が呼び出されないことを意味します。この問題を解決するには、ボタンがクリックされたときに openModal 関数を使用する必要があります。
リーリー

モーダル ボックスを閉じる
2. タグは、closeModal 関数を使用しません。次のようになります:
リーリー

3. closeModal関数はグローバル スコープで定義されていませんが、HTML から呼び出されます。これによりエラーが発生する可能性があります。この問題を解決するには、グローバル スコープで closeModal 関数を定義する必要があります:
リーリー

4. disableFullPageScroll 関数と enableFullPageScroll 関数は、FullPage.js メソッドを使用してスクロールを無効または有効にします。 FullPage.js を使用していない場合、または正しく初期化されていない場合、これらのメソッドは機能しません。 FullPage.js がプロジェクトに含まれており、正しく初期化されていることを確認する必要があります。

5. スクロール イベント ハンドラーの

   preventDefault メソッドと stopPropagation メソッドは、すべての場合にスクロールを防ぐのに十分ではない可能性があります。モーダルが開いているときは overflow

   スタイルを hidden に設定し、モーダルが閉じているときは auto にリセットすることもできます : リーリー
これらの提案を試して、問題が解決したかどうかをお知らせください。