Tutorial: 99.9% Webflow Created Modal Tutorial/Freebie Clone-able Page

Community resources Webflow Tips
22

@Waldo Thank you for reopening this thread and your help with your modal window solution!

I am editing this forum post to redefine my question and to hopefully receive some feedback.

After doing some extensive testing I believe that the modal popup solution only works under certain circumstances. This means as soon as the you set the Max Height of the “Modal” (class) to let’s say 1000px, not all of the content within the modal will be accessible depending on the viewport.

Please let me know if my observation is correct or if I am missing something.

Thank you.

23

@Waldo I also have same question with @crisp_thoughts

How did you bind each specific collection item with its corresponding modal?

For example, the image and text in collection item ‘modal 1’ appear in the modal corresponding to Modal 1 on the page, but I can’t find any layer/object in the navigator that references the collection item ‘modal 1’. The reference must be somewhere, but I can’t find it.

Can you tell me where you specified the specific collection item?

24

@gheloudgreat if you are still working on this issue, I found this Webflow live stream by @PixelGeek extremely helpful with explaining how to bind CMS collection to a modal. Check out: https://webflow.com/website/modal-workshop

and this is the link to the live stream: Creating a custom modal - YouTube

25

Hi @Waldo ,

I have two problems with the scrollable Modal on Mobile.

  1. The ease scrolling the modal on mobile stucks really hard and isn´t fluid any more.
    How do I get an ease scroll like scrolling without modal?

  2. When I scrolled to the end of the modal, the fixed body scrolls again!
    How can I fix this?

Hope you or somebody else can help. Here is a video for demonstration:

IMG_0361
IMG_0361350×623 2.58 MB

I have read that @bart wrote the custom script to fix the body. Probably you know how to fix this, too?

26

Hey @wedo

Check this one out on mobile: https://modal-background-scroll.webflow.io/

Read only: https://preview.webflow.com/preview/modal-background-scroll?utm_source=modal-background-scroll&preview=cc0b8eb489646378c2e9d5ae371d5bdb

Mobile Safari ignores overflow hidden on html and the body element.

I added to the script position fixed to the body on opening of the modal
$('body').css('position', 'fixed');
and of course removes it on close
$('body').css('position', 'static');

Hope it helps :grinning:

Edit: Content is moved to the left when modal opens. I’m on it.

1 Like
27

Hi @jorn,

thanks the fixed body works nice. But the scroll in the modal has still no ease. The scroll stucks on mobile. Is there any possibility that the scroll in the modal behaves like on the normal page?

28

Hey

Sorry for the late replay. Yeah you probably need to add some extra css. Here’s an article from CSS Tricks about that.

1 Like