Stop scrolling background while use multiple modals

Design help General
1

Hi everyone, this is my first post about Webflow and I wanted to know if I can stop background from scrolling while a modal is active.

I found a script to put in the footer already but the problem is that I have many modals, each one is associate to a project which has a specific class.

So how do I can I solve this problem in the most efficient way?

Thank you,
G.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Check here for a demo of a css only structure that’s easy to replicate with Webflow How to: Prevent Body From Scrolling When Overlay Is On | Have Fun Learning

There are also JS solutions that you can google, but many of them kind of hack the scroll and I don’t particularly like this.

3

Thank you Vincent, that’s what I needed.

Sorry but I’m new to all of these as I’m not a web designer or a programmer but I’m trying to learn as quick as possible so I can complete my website.

  • Do you know which one is the code that I need to inject into the page?
  • Do I have to inject in the head or the /body of my page? and what’s the difference between the two?

Here is the read only link: https://preview.webflow.com/preview/giuseppes-fabulous-project?utm_source=giuseppes-fabulous-project&preview=0c5cf994577180a75803d3c23dfcd0a6

it’s a bit of a mess now but I’m testing some ideas :slight_smile:

4

You do’nt need code, you need to check this page Scrollable Overlay and replicate the structure (html) and styling (css) in webflow.

https://v.usetapes.com/rJsTnl4piS

5

Ah ok. Still, I had already that styling applied to the modal and the body. It’s not working. Can you check if it works for you?

I found this on the forum…

19
191562×590 77.1 KB