Streaming live at 10am (PST)

How to create a modal/pop-up without any script


#1

Since custom code is only for paying members I though I'd show all my fellow freeloaders how to create a simple pop-up without any code

Setting up the pop-up

First off, you want to create a section into your page, give it the class modal-background and a transparent black background. Then give it a fixed position and select the Full page option.


Now, place a div within the modal-background, and give it the class modal-window.
Style it as you'd like but you have to have a link block with the class modal-close, and then select the modal-background and select display, none.

Creating the button

Create another link block in your body and call it modal-button and style it as you'd like

Creating the interaction

Select the modal-button and open the objects tab. Go down to interactions and create a new interaction, add trigger and click. Click affect different element(s) and choose modal-background. Add a step on first click and choose display block.

Now select modal-close and repeat the process except this time choose display, none.

That should do it :) I hope this helped you and feedback is very welcome


Hamburger Menu Content Box
#2

Thanks for sharing!

Beware that if you put a video on the modal, the video will actually keep playing, even though you have closed the modal...


#3

Even if you have the video paused as default? (like embedded youtube videos). If that is an option, I'm very new to webflow


#4

Any idea how to make a pop up that won't keep popping up every time you refresh or visit the same page multiple times?


#5