Are there any examples of simple responsive popup/modal windows with a close button that I can use on my Webflow site?

You can build a simple responsive popup/modal window with a close button in Webflow using native elements like Divs, Buttons, and Interactions. Here’s how to create one from scratch without custom code.

​

1. Set Up the Modal Structure

​

• Add a Div to your page and give it a class like Modal Wrapper.
• Set the position to Fixed, width/height to 100%, and top/left to 0 so it covers the screen.
• Set Display to Flex, Align Center and Justify Center to center the modal.
• Add a semi-transparent background color (e.g., rgba(0,0,0,0.5)) to dim the background.
• Initially set Display to None to keep the modal hidden.

​

2. Create the Modal Box

​

• Inside the Modal Wrapper, add another Div with a class like Modal Box.
• Set its background to white, add padding (e.g., 2rem), and apply a max-width (e.g., 400px) and 100% width.
• Add border-radius and box-shadow as needed for styling.
• Make sure it’s responsive by using percentage widths and max-width.

​

3. Add Content and Close Button

​

• Add a Text Block or any content you want inside the Modal Box.
• Add a Button or Div for the Close Button, give it a class like Close Modal.
• Position the close button top-right inside the modal box using absolute position, and add an “×” or SVG icon.

​

4. Set Up Interactions to Open the Modal

​

• Select the element you want to trigger the modal (e.g., a “Sign Up” button).
• Create a new Click Interaction and choose Show/Hide.
• On first click, set Display to Flex for Modal Wrapper and optionally add opacity and scale animations.

​

5. Set Up Close Interactions

​

• Select the Close Modal button and create a Click Interaction.
• Animate it to hide the Modal Wrapper (set Display to None and animate Fade-out if desired).
• You can also apply this interaction to the background overlay if you want the modal to close when clicking outside.

​

6. Make It Responsive

​

• Ensure that your Modal Box uses percentage-based or max-width values so it doesn’t overflow on smaller screens.
• Use Webflow’s breakpoints to adjust padding and font size if necessary.

​

Summary

​

You can create a responsive popup/modal in Webflow using only native elements and interactions, with a Modal Wrapper, Modal Box, and a close button. Make it responsive using flex layout and percentage-based sizing, and use interactions to toggle visibility. No custom code is needed.