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

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.

|239xauto
|240xauto

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.

|225xauto|225xauto|225xauto

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

1 Like

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…

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

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?