How can I remove the "no-scroll" class from the body tag in Webflow when the modal close button is clicked using the given custom code?

Published on
September 22, 2023

To remove the "no-scroll" class from the body tag in Webflow when the modal close button is clicked, you can use custom code. Here's the process to achieve it:

  1. First, you need to identify the specific class or ID of the modal close button you want to use for removing the "no-scroll" class. In this example, we'll assume the close button has an ID of "modal-close-button".

  2. Next, you'll need to add a custom code snippet to your Webflow project. Go to the Designer view and click on the 'Custom Code' tab in the top menu.

  3. In the 'Before ' section, click on the 'Add Custom Code' button. This will open up a code entry field.

  4. In the code entry field, you'll need to add the following JavaScript code:

<script>    document.getElementById('modal-close-button').addEventListener('click', function() {        document.body.classList.remove('no-scroll');    });</script>
  1. Replace 'modal-close-button' with the actual ID or class of your modal close button.

  2. Save the changes. Now, when the modal close button is clicked, the code will trigger the removal of the "no-scroll" class from the body tag, allowing the page to scroll again.

By following these steps, you can easily remove the "no-scroll" class from the body tag in Webflow when the modal close button is clicked.

Additional Questions:

  1. How do I add a custom code snippet in Webflow?
  2. Can I add multiple modal close buttons using this method?
  3. What other classes or IDs can be targeted with custom code in Webflow?