如何在模态框打开时禁用滚动 - 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';
}

请尝试这些建议，并告诉我是否解决了您的问题。