How to disable scrolling when modal is open - Full Page JS

Question

What I want to do is, when the modal is open, disable JavaScript scrolling for the entire page. The problem is that when I open the modal and try to scroll, it does move the content behind the modal, which is the actual web page, and I want to disable that. When the modal is opened, the background should be frozen.

<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">Open modal box</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>At our company, we have a passion for woodworking and it shows in all of our fabrication and interior design projects. We specialize in creating custom wood furniture, fixtures and accents that are as functional as they are beautiful</h5>
                    </div>
                </div>
            </div>


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


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

        // Disable FullPage.js scrolling when the modal is open
        function disableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // Enable FullPage.js scrolling when the modal is closed
        function enableFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        //Open modal box
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
            isModalOpen = true;
            disableFullPageScroll();
        }

        // Close the modal box
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
            isModalOpen = false;
            enableFullPageScroll();
        }

        // Handle button click events to open and close the modal
        $('#openModalButton').on('click', function() {
            openModal('id01'); // Replace 'id01' with the ID of your modal
        });

        $('#closeModalButton').on('click', function() {
            closeModal('id01'); // Replace 'id01' with the ID of your modal
        });

        // Handle scroll events
        $(window).on('scroll', function(event) {
            if (isModalOpen) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    });
</script>

Answer 1

The code you provided seems correct to disable scrolling when the modal is opened. However, there are several possible causes of the problem:

1. The button that opens the modal box does not use the openModal function you defined in the script. Instead, it directly manipulates the modal's style. This means that the isModalOpen variable is not set to true and the disableFullPageScroll function is not called. To solve this problem you should use the openModal function when the button is clicked:

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

2. The tag that closes the modal box does not use the closeModal function. It should look like this:

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

3. closeModalThe function is not defined in the global scope, but it is called from HTML. This may cause errors. To solve this problem, you should define the closeModal function in the global scope:

window.closeModal = closeModal;

The

4. disableFullPageScroll and enableFullPageScroll functions use FullPage.js methods to disable and enable scrolling. If you are not using FullPage.js, or it is not initialized correctly, these methods will not work. You should check that FullPage.js is included and initialized correctly in your project.

5. The preventDefault and stopPropagation methods in a scroll event handler may not be sufficient to prevent scrolling in all cases. You may also want to set the

   overflow style to hidden when the modal is open, and reset it to auto when the modal is closed ：

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';
}

Please try these suggestions and let me know if they solve your problem.