How to disable scrolling on content *under* lightbox popup?

Publishing help General
1

Hey!

Hoping someone can help with this … When my lightbox window pops up, it’s hard to scroll just the lightbox content without also scrolling the content behind the popup (especially on mobile). Is there any code I can inject to freeze the body content but still allow the content in the lightbox to scroll? Thanks!

Here’s a screen video showing what’s happening:
https://www.screencast.com/t/XClMn0bT0Ad

Here’s the share link to my site:
https://preview.webflow.com/preview/adesigns?preview=09b5f0308b7443e841b8fd0805c7e1de

Any ideas? Thanks y’all!

2

Hi @adiggy, yes, this would be great to be able to set the body to overflow hidden when the interaction opens the modal.

The feature to set the body to overflow hidden is not natively built in, but it can be achieved with a little custom code, see how to use custom code here: Custom code in head and body tags | Webflow University

Try this:

  1. Give your button link that opens the modal an id of #open-modal.

  1. Give the link that closes the lightbox, the btn-close-container class, an id of #close-modal

Paste the following code into the Footer of the site in custom code in page settings:

<script type="text/javascript">

$(document).ready(function() {
$('#open-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'hidden');
    });
$('#close-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'auto');
    });
});
</script>

Image 2017-03-29 at 8.47.15 AM.public.png909×656 63.8 KB

Save changes and republish. On published view, the body will change to overflow hidden when the modal is open, and then change to auto (visible scroll works) when the modal is closed.

I hope that helps

3

You’re so helpful, Dave! So awesome. I’ll try implementing this when I’m back in front of my computer. Thanks so, so much!

4

Hey again,

Thank you again for your help with this. This kind of customer service is what puts Webflow above and beyond everyone else. Such a breath of fresh air. :slight_smile:

So I implemented it and it seems to work right on desktop, but not on mobile? Is there any reason code-wise this would be happening?

Also, I had added the ID “open-modal” to the “contact” button in the navigation of every page as well as the “yes please!” button at the bottom of every page but after it gave me the error message that the ID had already been used on the page, I deleted it (and even now tried giving it a completely new ID called “test”) and now it’s still opening up the modal (which it shouldn’t be since it has a different ID than is called in your javascript). Why is that? Seems buggy, but maybe it’s something I’ve done wrong?

1 Like
5

This topic was automatically closed after 60 days. New replies are no longer allowed.