How can I activate a modal with a "subscribe" button in Webflow or have the modal automatically pop up after a set amount of time?
TL;DR
- Create a modal structure with a
modal-wrapperdiv (hidden by default) and amodal-contentdiv inside. - Add a "Subscribe" button trigger that sets
opacityto 100% anddisplaytoflex/block, with a close button reversing this. - Enable automatic appearance by setting initial opacity to 0% and display to none, then changing them after a delay using Page Load Interactions.
To create a modal popup in Webflow, you can trigger it with a "Subscribe" button or have it open automatically after a delay using Webflow’s native interactions. Follow the steps below.
1. Create the Modal Structure
- Add a Div Block inside your Webflow project and give it a class like
modal-wrapper. - Set its Display to
FlexorBlockand Position toFixed(with Full Screen coverage). - Place a Second Div Inside (class:
modal-content) where you can add elements like text, input fields, and a close button. - Style the
modal-wrapperwithOpacity: 0%andDisplay: None(so it starts hidden).
2. Add a "Subscribe" Button Trigger
- Select the "Subscribe" button and go to Interactions (
⚡panel). - Under Click Actions, create a new animation that:
- Changes
opacityofmodal-wrapperto100%. - Sets
displaytoflex/block(to make it visible). - Add a Close Button inside
.modal-contentwith a reverse interaction: - Changes
opacityto0%and hides it (display: none).
3. Make the Modal Appear After a Delay
- Select the
modal-wrapperand go to Page Load Interactions. - Create a New Animation:
- Add an initial state where Opacity =
0%and Display =None. - After a Delay (e.g., 3s), change Opacity to
100%and Display toFlex/Block. - Save and Publish to test.
Summary
To activate a modal in Webflow, use Click Interactions on a "Subscribe" button or a Page Load Delay to show it automatically. Ensure interactions control opacity and display settings correctly.