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
- Design a hidden, full-screen modal using a fixed-position Div Block and set its initial display to None.
- Create show and close animations using Webflow’s Interactions with transitions for display and opacity.
- Link the show animation to either the "Subscribe" button click or a delayed Page Load trigger.
- Assign the close animation to a close button or background click to hide the modal smoothly.
To display a modal in Webflow using a "Subscribe" button or after a timed delay, you can use interactions directly within Webflow's Designer—no custom code is required. Here's how to set up both.
1. Design the Modal Element
- Create a Div Block that will contain your modal. Give it a class like
modal-wrapper. - Set position to Fixed, full-screen (Top: 0, Left: 0, Width: 100%, Height: 100%), and Z-index above other elements (e.g., 9999).
- Set initial display to None in the Style panel.
- Inside the modal, add your content (form, text, close button, etc.).
- Optionally, add a semi-transparent background color for the wrapper.
2. Create a Show Modal Animation
- Go to the Interactions panel.
- Choose Element Trigger → Mouse click (tap) or Page Trigger, depending on the method.
- Create a new animation titled something like Show Modal:
- First, change the display state of the
modal-wrapperto Block. - Then apply an opacity or scale transition so it fades or expands into view.
3. Trigger Modal on Subscribe Button Click
- Select the "Subscribe" button in the Designer.
- Go to Interactions > Element Trigger > Mouse click (tap).
- Choose your "Show Modal" animation to trigger on the first click.
4. Trigger Modal After Time Delay
- Go to Page Trigger → Page Load.
- Choose Timed Animation.
- Create a new animation (e.g., Modal After Delay).
- Use the "Wait" action to delay the animation by your desired time (e.g., 3000ms for 3 seconds).
- Then follow the same steps as the show modal animation (display block + opacity or scale).
5. Add Modal Close Interaction
- Create a new animation called Close Modal:
- Animate the modal's opacity to 0.
- Then set display to None.
- Apply this animation to any close button or the modal background using an Element Trigger > Mouse click (tap).
Summary
To activate a modal in Webflow, connect the modal’s visibility animations to either a Subscribe button click or a Page Load trigger with a delay using Webflow's built-in Interactions panel. Use display and opacity transitions to smoothly open and close the modal.