Full Page JS - How to disable scroll when the modal is open

Question

what im trying to do is when the modal is open i would like to disable the full page js scroll disabled. The problem is when i open the modal and trying to scroll it does move the content thats behind the modal which is the actual web page i would like to disable that. When the modal is open the the background should be freezed.

 <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</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 wood working that shines through in all of our
                            manufacturing and interior design projects. We are experts in crafting custom wood
                            furniture, fixtures, and accents that are not only functional but also aesthetically</h5>
                    </div>
                </div>
            </div>


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


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

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

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

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

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

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

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

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

Answer 1

The code you provided seems to be correct in terms of disabling the scrolling when the modal is open. However, there are a few things that might be causing the issue:

1. The button that opens the modal is not using the openModal function you defined in your script. Instead, it's directly manipulating the style of the modal. This means that the isModalOpen variable is not being set to true, and the disableFullPageScroll function is not being called. To fix this, you should use the openModal function when the button is clicked:

<button id="openModalButton" class="w3-button w3-black">Open Modal</button>

2. The span that closes the modal is also not using the closeModal function. It should be like this:

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

3. The closeModal function is not defined in the global scope, but it's being called from the HTML. This might be causing an error. To fix this, you should define the closeModal function in the global scope:

window.closeModal = closeModal;

4. The disableFullPageScroll and enableFullPageScroll functions are using FullPage.js methods to disable and enable scrolling. If you're not using FullPage.js, or if it's not properly initialized, these methods will not work. You should check if FullPage.js is properly included and initialized in your project.

5. The preventDefault and stopPropagation methods in the scroll event handler might not be enough to prevent scrolling in all cases. You might also need to set the overflow style of the body 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 issue.