Are there any examples of simple responsive popup/modal windows with a close button that I can use on my Webflow site?
TL;DR
- Create a fixed, full-screen modal wrapper using Flexbox, set to hidden by default with a semi-transparent background.
- Add a styled content box inside the wrapper with your desired content and a close button.
- Use Webflow interactions to toggle the modal's display between None and Flex on open/close triggers.
- Ensure responsiveness with % widths and Flexbox, and disable body scrolling when the modal is open.
Yes, Webflow allows you to build simple responsive popup/modal windows using native interactions, and here’s a clear example structure you can replicate.
1. Create the Modal Structure
- Add a
Div Blockto the page and name it something like Modal Wrapper. - Set the Position to Fixed, Full (top: 0, bottom: 0, left: 0, right: 0).
- Set Display to Flex, Align center, and Justify center.
- Apply a semi-transparent black background (e.g., rgba(0,0,0,0.5)) so the modal stands out.
- Set the Z-index to something high, like 9999, so it overlays all content.
- Set Visibility to Hidden initially (use Display: None), as it will be triggered through interaction.
2. Add the Modal Content Box
- Inside the Modal Wrapper, add another Div Block (e.g., Modal Content).
- Set a max-width (e.g., 500px), width: 90%, and padding/Margin as needed.
- Give it a white background and some border radius/shadow for visual style.
- Inside this box, add your desired content: headings, paragraphs, buttons, etc.
3. Add a Close Button
- Inside the Modal Content div, add an Image (for an "X" icon) or a Text Link styled as a close button.
- Position it inside the modal using absolute positioning if desired (top-right corner).
4. Set Up Open/Close Interactions
Select the element that will open the modal (e.g., a button or link).
Go to the Interactions panel, choose Mouse Click (Tap) → Start an Animation → New Animation.
Add a Display: Flex action for the Modal Wrapper to make it appear.
Then, select the Close button, and create a new interaction that sets the Modal Wrapper’s display to None when clicked.
5. Make Sure it’s Responsive
- Since the modal uses Flexbox and % widths, it will adapt to different screen sizes.
- You can test on Webflow’s breakpoints to adjust padding, font size, or positioning for smaller screens.
6. Optional: Add Page Overflow Control
- To prevent the background page from scrolling while the modal is open, add an additional interaction step:
- On modal open: add Body → Overflow: Hidden.
- On modal close: set Body → Overflow: Auto.
Summary
To implement a simple responsive modal in Webflow:
- Build it using fixed divs and flex layout.
- Use Webflow interactions to toggle display between None and Flex.
- Apply styling and responsiveness through the Designer.
- Add a close button with its own interaction to hide the modal.
This approach lets you create lightweight and clean popups without custom code.