How To Create A Popup In Webflow

Quick summary

Creating a popup in Webflow requires adding a Div Block, styling it with absolute positioning, and wiring it to a click interaction that toggles display visibility. This no-code approach uses Webflow's built-in Interactions panel to show and hide the popup on demand.

Steps

1. Open the Add Elements tab on the left sidebar menu.
2. Insert a Div Block element to serve as the popup wrapper.
3. Select the new Div and navigate to the Style tab on the right sidebar.
4. Locate the Size options and set your desired popup dimensions.
5. Set the desired size values for your popup.
6. Optionally change the background color or style of the Div.
7. Add additional elements inside the Div to populate the popup content.
8. Add a heading text element inside the popup Div.
9. Continue building out the popup until your design is ready.
10. Select the popup Div and find the Position option in the right sidebar.
11. Set the popup's position to Absolute.
12. Set the z-index to a high value so the popup stays above all other elements.
13. Adjust the popup's on-screen position to where you want it to appear.
14. In the Layout section, set Display to None to hide the popup by default.
15. Select the trigger element (e.g., a button) that will open the popup.
16. Go to the Interactions tab in the right sidebar.
17. Click the (+) icon next to Element trigger.
18. Select Mouse click (tap) as the trigger type.
19. Select the 1st click Action option to configure.
20. Choose Start an animation as the action type.
21. Click the (+) icon next to Timed Animations to create a new animation.
22. Enter a name for the animation, such as Show popup.
23. Use the navigator to select the hidden popup Div.
24. Click the (+) icon next to Actions to add an animation action.
25. Select Hide/Show from the action options.
26. Optionally adjust the Affect setting to target only the popup element.
27. Set the display action to Display: Block to reveal the popup.
28. Click Save to store the first animation.
29. Repeat the same steps for the 2nd click Action to set up the close behavior.
30. At the final step, set the action to Display: None to hide the popup on second click.
31. Save your second animation.
32. Use Preview mode from the top-right button to test the popup.
33. Click the trigger button to verify the popup appears correctly.
34. Click the button again to confirm the popup closes as expected.