Freeze a modal on click

To prevent the background of your website from scrolling while a modal is open, you need to add a small snippet of code at this time. Here's a quick guide on how to stop a page from scrolling when you have a modal open.

Let's beginClone this project ➞

Here is a modal to test with

Click on the button below to open a modal.
‍
Open a modal ➞

Here is the modal structure

The tags are added below to highlight the different elements in the modal. The close element is a "+" plus sign that's rotated 45 degrees on the z-axis (it is not tagged below, but it is outlined).
modal-bg
This is text inside of a modal 👋 😄
+
modal
Modal Centering
modal-parent

Add this custom code to your site

This custom code will prevent your page from scrolling when a modal is opened.

If you're following this tutorial, I recommend naming your elements with the following class names:‍

<script>
Webflow.push(function() {
   $('.modal-button').click(function(e) {
      e.preventDefault();
   $('body').css('overflow', 'hidden');
 });  $('.close').click(function(e) {
      e.preventDefault();
    $('body').css('overflow', 'auto');
 });
});
</script>
<script>
Webflow.push(function() {
  $('.modal-bg').click(function(e) {
    e.preventDefault();
       $('body').css('overflow', 'auto');
 });
});
</script>

Assembled with ❤️  by Waldo