Jquery removeClass not working in Modal

Design help Custom code
1

I built a Modal integrated with CMS. I am using custom code to attach a class to the body tag to stop body scroll when modal is open. All good except, When the modal close button is clicked, removeClass doesnt remove the attached class from the body tag. Tried in so many ways but the class is stuck on the tag and doesnt budge. Any help is highly appreciated.

Here is the test link:
https://nasdaqdubai.webflow.io/debug

And the custom code:

Webflow.push(function() {
$(‘.modal-trigger’).click(function(e) {
e.preventDefault();
$(‘body’).addClass(‘no-scroll’);
});
$(‘.modal-close’).click(function(e) {
e.preventDefault();
$(‘body’).removeClass(‘no-scroll’);
console.log(“clicked”);
});
});

1 Like
2

Hello @Muhammed_Jenos

I’m not a specialist when talking about scripts, but can you try using

<script>
Webflow.push(function() {
  $('.modal-open-class').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

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

There’s no class adding to the body ect.

Piter :webflow_heart:

3

To add to Piter’s advice you may also set timeout to allow for some flexibility in changing background behaviour (for example if you need an animation to finish before showing background with re-enabled overflow):

Webflow.push(function() {
  $('.modal-trigger').click(function(e) {
    e.preventDefault();
        setTimeout(
            function() {
               	$('body').css('overflow', 'hidden');
            },
            200);
  });

$('.modal-close').click(function(e) {
    e.preventDefault();
     setTimeout(
            function() {
               	$('body').css('overflow', 'auto');
            },
            500);
  });
2 Likes
4

Thank you so much. This one worked.
I guess its the other animation thats holding onto the element which created the issue in the first place.

Thank you everyone for taking time to reply and help. Appreciated

2 Likes