How can I disable scrolling on everything except the modal div in Webflow using custom code?

To disable scrolling on everything except the modal div in Webflow, a custom code approach is required to manage the overflow property.

​

1. Create a Modal Div

• Make sure you have a modal div set up in your Webflow project.
• Ensure that your modal is set to display in a fixed or absolute position, covering the screen as needed.

​

2. Add an ID to the Modal Div

• Select your modal div in the Webflow Designer.
• Give it a unique ID, such as modal.

​

3. Add Custom Code to Head

• Go to Project Settings in your Webflow dashboard.
• Select the Custom Code tab.
• In the Head Code section, add the following CSS to disable scrolling on the body when the modal is displayed:

  ```css

  <style>

    body.modal-open {

      overflow: hidden;

    }

  </style>

  ```

​

4. Add Custom Code to Footer

• In the Footer Code section, add the following JavaScript to handle the opening and closing of the modal:

  ```html

  <script>

    document.addEventListener("DOMContentLoaded", function() {

        // Select the modal by ID

        var modal = document.getElementById('modal');

        // Function to open the modal

        function openModal() {

            modal.style.display = 'block';

            document.body.classList.add('modal-open');

        }

        // Function to close the modal

        function closeModal() {

            modal.style.display = 'none';

            document.body.classList.remove('modal-open');

        }

​

        // Example: Open modal button click handler

        document.getElementById('openModalButton').addEventListener('click', openModal);

​

        // Example: Close modal button click handler

        document.getElementById('closeModalButton').addEventListener('click', closeModal);

    });

  </script>

  ```

​

5. Save and Publish

• Save changes in the Project Settings.
• Publish your site to see the changes in effect.

​

Summary

By adding specific CSS and JavaScript, you can effectively disable body scrolling when the modal is open while allowing interaction with the modal itself. This involves using a class on the body element to control scrolling and JavaScript to manage your modal's visibility.