Build a basic popup modal in Webflow

Unlock the potential to engage your audience with captivating popup modals that can be customized to fit your brand's unique style. From showcasing special offers to capturing user feedback, popup modals are an effective way to enhance user interaction and conversions. In this video tutorial, I’ll teach you how to create a basic popup modal in Webflow.
Intro:
00:00
Example sites:
00:06
Webflow Walkthrough:
00:52
Closing Remarks
8:30
My Website:
www.dereksiu.com.au/
👇 Affiliate Links:
Hire a Freelancer: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.grsm.io/4brsncjjm7ge

[@jonathanf8662]

Thank you so much. This is exactly the tutorial I was looking for. I appreciate the simplicity, specificity, and speed of the tutorial.

[@dereksiuau]

You're very welcome! Glad you found it helpful and simple!

[@user-gn2le8xm8u]

Your explanations are really easy to understand and straightforward. It was a challenging problem, but with your explanation, it seems simple and easy to follow. I got a lot of help. Thank you!!!!

[@dereksiuau]

Glad it helped! As long as you understand the premise and reasoning you are on your way to become a Webflow Developer / problem solver.

[@comanadrian554]

great tutorial thanks a lot Derek!! you helped me a lot now during my first project with my first client. you make it look easy and simple. keep it up with tutorials like these!

[@dereksiuau]

Awesome glad it helped!

[@valeriichunikhin]

Good tutorial, thanks so much!

[@user-ik8vy1rg8f]

Well done tutorial. Learned what I needed to know. Thanks.

[@dereksiuau]

Glad it was helpful!

[@veereshgt9838]

Can't thank enough! Very informative bro 🤩

[@dereksiuau]

Happy to help!

[@thevezevulunderground2079]

very cool tutorial , thank you for your work

[@dereksiuau]

Thanks glad you found it useful!

[@miriamaraujo6984]

Great help bud. cheers

[@dereksiuau]

Thanks for the reply - cheers!

[@divineohaekelem8347]

Thank you this is really helpful

[@dereksiuau]

Glad you found value!

[@RahulYadav-yg6zh]

Bro your channel is amazing! No one goes in-depth like you. Can you please upload regular videos?

[@dereksiuau]

Hey thanks for watching - yes I plan too! Keep an eye out.

[@malekz3atreh495]

thanks man that was helpful

[@dereksiuau]

Glad to hear it!

[@kaanozgiray483]

Thanks a lot for this, easy to follow and well explained! I had to do this for a collection (imagine a list of images, and when you click on one of them, the modal shows the image you clicked) would be cool if you showed how to do this same thing but with collections as it's slightly more complex :) Thanks again.

[@dereksiuau]

Glad it helped! With collection (CMS) it would be same concept but custom code has to be applied. The best and easiest solution is to use Finsweet Modal :)

[@asitol.design]

Thank you bro

[@dereksiuau]

Your Welcome :)

[@user-ho8uz7jj3t]

the one and only big chungus hahahahhahahah

[@user-ho8uz7jj3t]

love it

[@dereksiuau]

Thanks for watching! Gotta mention the G.O.A.T Big Chungus lol.

[@14dimitri]

reat tutorial it was vary usefull and i used it for my website. just one biiiggg question. If you want to make multiple pup-up screens. as for instance for on a website as you showed at 0:30, If you make the effect select the pup-up page it will select all the dive-blocks with the same name to op en acllose. However If i would give every dive-block a different name for every pup-up page then I'll need to manually change al the pup-up screens one by one, if i'll ever have to make an amusement and want to keep it uniform. How do you make connect the button effect to an individual pup-up screen whitout selecting them aa at the same time?

[@dereksiuau]

Hi Dimitri, Sorry I thought I replied. Essentially there are two ways around this: 1/ Manual way (coding each element to have the effect) Create a DIV block with a class eg: "popup-content" then each div block will have a unique combo class eg. "speaker 1" , "speaker 2" etc. Have it so that when Button 1 is clicked it will open popup "speaker 1", when button 2 is clicked it will open popup "speaker 2" and so on. Then for the close icon you can just set the class "popup-content" to display none. 2/ Automatic way through CMS This can be achieved through a plugin like: finsweet.com/attributes/modal I hope this helped.

[@samfortune589]

This is really useful, but it's hard not to laugh whilst you're saying 'I'm gonna add some information about the big chungus' 🤣🤣🤣

[@dereksiuau]

Hahaha finally I've been waiting for a comment mentioning the Big Chungus.

[@samfortune589]

I love Aussie humor, great work tho mate already used this on a few builds! Keep em coming please 🙏

[@TheSeha3]

thank you so much for the tutorial! it all worked the first time I opened and closed the modal but didn't work when I click the open button the second time, any advice for this?

[@dereksiuau]

Make sure in the interaction to apply to class + the elements to be "All Elements" not "Child" or "Sibling". Let me know if that fixes it. If not please share your read-only link and I can let you know the answer :)

[@vishishtrawat9817]

Amazing video but hey I cannot find display buttons for when I apply animation to pop-up. Any idea why is it happening?

[@dereksiuau]

Since this video was filmed a while back - Webflow recently changed their UI slightly, but the display buttons should still be there! Let me know otherwise.

[@FranciscoTeruggi]

Thanks for the video, it really helped. Question, i am traying to build more than one popup and with different info, which would be the best way to do that?

[@dereksiuau]

There are many ways. One is you can use the premise of this tutorial and apply combo classes and unique interactions for each popup. The other is to build in CMS and use custom code like Finsweet solution to achieve this. It depends on your needs. Keep in mind the CMS route will require a CMS plan and the first option might be time consuming depending on how many popup items you have. Hope this helped.

[@FranciscoTeruggi]

@@dereksiuau Thanks for the help, really aprecciate it!

[@hogarthheathan]

how do you show and hide and also fade in at the same time, cant seem to figure that out, nice tutorial btw

[@dereksiuau]

That would be adding a opacity interaction on top of the hide show. So on reveal, I just put it from display none to display flex. You want to do that except also put opacity to 0 then opacity to 100. Hope that helps.

[@user-ew1yp2pv6m]

When you put a header in your box it automatically enlarges to hold the heading, mine stays the same size?

[@dereksiuau]

Can you please clarify with timestamp what you are referring to exactly? Thanks.

[@ev7dence727]

can you say how block scrolling popup without code? im done...

[@jessesaunders3584]

My pop-up-item won't go to the center of the page. The WebFlow interface has been updated. I can still choose flex as in the video but chose align center for both x and y. The pop-up-item remains at the top of the page and also takes up the entire width of the screen. There have been no changes to its size. Any help is greatly appreciated. Thanks.

[@dereksiuau]

Hey Jesse, Firstly thanks for watching. I understand your situation and yes when I recorded this video it's using the old Webflow UI. Neverthe less it's the same premise you want to make sure flex is set and positioned centre, centre. This is the parent DIV of "pop-up-item". Just keep in mind everything has to be defined. Let me know how it goes!

[@modafoca8528]

But how do I call this modal again with different content? Just like the profiles website you showed.

[@dereksiuau]

Just follow the premise of this video and if you have different content / profiles. Just apply a separate interaction. I hope this helped. If you need more guidance lmk 🙏

[@MsLana555]

@@dereksiuau Hi Derek, thank you for the great video! If I want to make several popup-s on one page, should I build each one from scratch and apply separate interaction?

[@user-qq2pi9qn3t]

7.45 why on my webflow there are no dislay button on animation, except i the set as initial state button, my pop up doesnt work

[@user-qq2pi9qn3t]

7:46

[@dereksiuau]

Make sure you have the correct element / div block selected. And make sure that when you apply the interaction the correct element is also selected. It should definitely have the display buttons you are after.

[@user-qq2pi9qn3t]

7.45 why on my webflow there are no display button? the pop up didnt work :(

[@dereksiuau]

It definitely should be there! - Just make sure the right div block is selected. LMK!

[@bilalwho3490]

how to do it on all the buttons at the same time

[@dereksiuau]

Make the interaction set to class

[@arupde6320]

be regular

[@etiennegp]

doesnt workout well on mobile you scroll infinetelt y

[@dereksiuau]

Make sure the popup i set to fixed with a min-width 100% max height 100VH (or DVH). If the popup content is taller than the height of the mobile you will need to add a max height eg. 480px and then make the content have a scroll bar by using Overflow Auto.

[@mattmcintosh4337]

Chungus

[@dereksiuau]

The one and only :)