如何在模態框開啟時停用捲動 - Full Page JS

Question

我想要做的是，當模態框打開時，禁用整個頁面的JavaScript滾動。問題是，當我打開模態框並嘗試滾動時，它確實移動了模態框後面的內容，即實際的網頁，我想停用它。當模態框打開時，背景應該被凍結。

<div id="fullpage">
            <div class="section">
                <?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="container background-filter">
                <div class="row">
                    <div class="col-12">
                        <h3 class="section-title"></h3>
                    </div>
                    <div class="col-12">
                        <h5>在我們的公司，我們對木工有著熱情，這在我們所有的製造和室內設計項目中都能體現出來。我們擅長製作客製化木製家具、裝置和裝飾品，它們不僅功能強大，而且美觀</h5>
                    </div>
                </div>
            </div>


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


<script>
    $(document).ready(function() {
        var isModalOpen = false;

        // 當模態框開啟時停用FullPage.js捲動
        function disableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // 當模態框關閉時啟用FullPage.js捲動
        function enableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        // 開啟模態框
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
            isModalOpen = true;
            disableFullPageScroll();
        }

        // 關閉模態框
        function 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
        });

        // 處理滾動事件
        $(window).on('scroll', function(event) {
            if (isModalOpen) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    });
</script>

Answer 1

您提供的程式碼在打開模態框時禁用滾動似乎是正確的。然而，有幾個可能導致問題的原因：

1. 開啟模態方塊的按鈕沒有使用您在腳本中定義的openModal函數。相反，它直接操作模態框的樣式。這意味著isModalOpen變數沒有被設定為true，disableFullPageScroll函數也沒有被呼叫。要解決這個問題，您應該在按鈕被點擊時使用openModal函數：

<button id="openModalButton" class="w3-button w3-black">打开模态框</button>

2. 關閉模態框的標籤也沒有使用closeModal函數。應該是這樣：

<span id="closeModalButton" class="w3-button w3-display-topright">&times;</span>

3. closeModal函數沒有在全域作用域中定義，但它被從HTML中呼叫。這可能會導致錯誤。要解決這個問題，您應該在全域作用域中定義closeModal函數：

window.closeModal = closeModal;

4. disableFullPageScroll和enableFullPageScroll函式使用FullPage.js的方法來停用和啟用捲動。如果您沒有使用FullPage.js，或者它沒有正確初始化，這些方法將無法運作。您應該檢查FullPage.js是否正確包含和初始化在您的專案中。

5. 滾動事件處理程序中的preventDefault和stopPropagation方法可能不足以阻止所有情況下的捲動。在模態框打開時，您可能還需要將的overflow樣式設定為hidden，並在模態框關閉時將其重設為auto ：

function disableFullPageScroll() {
    $.fn.fullpage.setAllowScrolling(false);
    $.fn.fullpage.setKeyboardScrolling(false);
    document.body.style.overflow = 'hidden';
}

function enableFullPageScroll() {
    $.fn.fullpage.setAllowScrolling(true);
    $.fn.fullpage.setKeyboardScrolling(true);
    document.body.style.overflow = 'auto';
}

請嘗試這些建議，並告訴我是否解決了您的問題。