So deaktivieren Sie das Scrollen, wenn Modal geöffnet ist – Full Page JS

Question

Wenn das Modal geöffnet ist, möchte ich das JavaScript-Scrollen für die gesamte Seite deaktivieren. Das Problem besteht darin, dass, wenn ich das Modal öffne und versuche zu scrollen, der Inhalt hinter das Modal, also die eigentliche Webseite, verschoben wird, und ich möchte das deaktivieren. Beim Öffnen des Modals sollte der Hintergrund eingefroren sein.

<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">Modalbox öffnen</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 hintergrundfilter">
                <div class="row">
                    <div class="col-12">
                        <h3 class="section-title"></h3>
                    </div>
                    <div class="col-12">
                        <h5>In unserem Unternehmen haben wir eine Leidenschaft für die Holzbearbeitung und das zeigt sich in allen unseren Fertigungs- und Innenarchitekturprojekten. Wir sind auf die Herstellung maßgeschneiderter Holzmöbel, Einrichtungsgegenstände und Akzente spezialisiert, die ebenso funktional wie schön sind</h5>
                    </div>
                </div>
            </div>


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


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

        // Deaktivieren Sie das Scrollen von FullPage.js, wenn das Modal geöffnet ist
        Funktion disableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // Aktivieren Sie das Scrollen von FullPage.js, wenn das Modal geschlossen ist
        Funktion enableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        //Modalbox öffnen
        Funktion openModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
            isModalOpen = true;
            disableFullPageScroll();
        }

        // Modalbox schließen
        Funktion closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
            isModalOpen = false;
            enableFullPageScroll();
        }

        // Behandeln Sie Schaltflächenklickereignisse, um das Modal zu öffnen und zu schließen
        $('#openModalButton').on('click', function() {
            openModal('id01'); // Ersetzen Sie 'id01' durch die ID Ihres Modals
        });

        $('#closeModalButton').on('click', function() {
            closeModal('id01'); // Ersetzen Sie 'id01' durch die ID Ihres Modals
        });

        // Scroll-Ereignisse verarbeiten
        $(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';
}

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