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

Hey everyone, just as a little thank you for being awesome I threw together a little tutorial/clone-able page on creating a 99.9% Webflow Modal. :slight_smile:

Please let me know if there’s anything I can do to improve it/clarify steps in creating Modals in Webflow with regular elements & Webflow interactions. :smile:

http://modal-tutorial.webflow.io/

Have Fun! Let me know if you have any questions. :slight_smile:

:heart: Waldo

EDIT: Got some javascript from a ninja to stop the page from scrolling when a modal is open. :wink: So there’s that .1%

13 Likes

Nice one Waldo!
:grinning:

1 Like

Wow this is great. Thanks for sharing.

1 Like

Thanks @rugged please let me know if you have any questions.
@Mat also made a super awesome simple/quick tutorial to follow on the Webflow blog on how to create a pop-up modal:

:smile:

Thanks,
Waldo

1 Like

Nice Waldo, the only limitation to all these interaction modals is that it is difficult integrating into dynamic content lists. Until we have a modal and tooltip widget natively in Webflow we’ll continue to be stuck with this static content solutions which is not professional, else you go for custom coding with jquery, which is too much js overload for me.

Actually I built these so that it it would only take me a few minutes to bind the CMS to these modals. :smile:
I’ll do that today and let you know when it’s done @topelovely :smile:

Oh! Ok Waldo. I use Webflow export code for my work. I don’t use the CMS. I will appreciate that. Thanks.

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 - General - Forum | Webflow

@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