No Scroll with Modal Popup help

Hi All –

Looking for another set of eyes on this project.

I am trying to add a no-scroll function when a CMS modal is open.

Halfway there - I can get the scroll to stop on open but not the other way around.

I cannot get the no-scroll class to deactivate/remove on close.

Any help is greatly appreciated!

Web Link

Read Only Link

I have tried this method:

<script>
// when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
 // on .open-modal click
 document.querySelectorAll('.open-modal').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
  // on every click
    document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll')); 
    });
 });

 // on .close-modal click
 document.querySelectorAll('.close-modal').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
  // on every click
    document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll')); 
    });
 });
});
</script>

and this method:

<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>

wf-1

1 Like

Hey @ChieraCreative, I can’t really comment on your current script but can leave you with two alternative solutions from @Finsweet.

Solution 1

Solution 2 (I believe to be the most recent)

Let me know if this helps.

Hey @choreus, Thank you for the reply!

I tried solution 1 (currently active on the site).

Solution 2 using attributes looks to be promising - I’ll give that one a shot in a bit and update this post.

Thank you again for taking the time.