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

Took about 3 minutes (had to make a collection haha): http://modal-tutorial.webflow.io/#dynamo

But once you make the collection, you just drag one of the modals in there and bind the elements/ style it how you’d like each one to look (I used the rich text field to be able to add additional images in the modal. :smile:

@topelovely

Looks good Waldo leveraging webflow.js interaction with its CMS. Can this be done with exported code too? because that’s my challenge. I want to do this purely using webflow.js with my own data. Is it possible?

Thanks! :slight_smile:

I am not entirely sure how to integrate your own data into it, but I’m sure it’s possible with some php.
I prefer keeping everything within Webflow (the CMS just makes everything so simple and easy to update). :slight_smile:

Thanks Waldo, I eventually got this to work with dynamic content after many months without any jquery dependency strictly webflow interaction and good structuring courtesy one of Sabanna’s forum interventions. This is it here: http://vivovelab.vivovecompany.com/experimentlab/labtest-two.html

1 Like

Nicely done! All that my jquery does is stop the screen from scrolling when the modals are open :smile:

Otherwise it’s all Webflow based :slight_smile: @topelovely

Hey @Waldo! Is it possible to trigger the modal from within a slider?

The slider mask has an overflow:hidden property that overrides the modal’s full screen. If you set overflow to visible, it makes the other slides visible and messes your site’s width.

An option would be to place the modal container outside of the slider and call it with an interaction which is not limited to sibling elements. But I need to trigger several modals from within several elements inside the slider. A different interaction would be needed to trigger each specific modal. Is it possible to do this using just one interaction, keeping the modal containers inside the slider?

Thanks!!

Dave.

Hey @davidvm great question! :slight_smile: I think you’ll need to create an interaction for each modal and a different class name for each modal. :confused: But to speed up the workflow you can at least duplicate the interaction. :slight_smile: Wish there was another way to build it but the mask causes an issue. Could maybe try changing where the modal sits on the z-axis with 3-D transforms? :slight_smile:

Thanks! Will try that. Is using overflow-x in custom css an option? To just hide the horizontal overflow. I remember I tried it once, but it wasn’t doing the desired effect. I wonder why.

Wow…what a great tutorial. I wish they all were this clear. Do think I could use this to show multiple (12-15) different images in a gallery? I have found the lightbox widget to be a bit limiting.

Thanks

How does one have a site wide modal? Symbol and add it everywhere? Tiring!

Hi @mayhemonger, if you have a specific question on a modal layout, it may be good to create a new post for that. Let us know what you are trying to do, and maybe there is a way to do it, either using Webflow completely, or using a little custom code.

See the posting guidelines here: Posting Guidelines for the Design Help Category

@Waldo, I’m using this very helpful tutorial and have a question.

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?

Chris

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

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

@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: https://www.youtube.com/watch?v=DuZ_FC-iPPI

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

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

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

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?

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