How can I create a modal in Webflow using CSS and positioning techniques?

TL;DR
  • Create a fixed-position, full-screen Modal Wrapper with flex centering and set its display to None initially.  
  • Nest a styled Modal Box inside the wrapper, add content and a Close Button.  
  • Add an Open Modal Button and use interactions to show the modal (set display to Flex and fade in opacity).  
  • Add interactions to the Close Button (and optionally the wrapper) to fade out and hide the modal.  
  • Ensure the Modal Wrapper has a high z-index so it appears above all other content.

You can create a modal in Webflow using native Designer tools with CSS positioning and visibility settings—no custom code needed.

​

1. Create the Modal Container

​

  • Add a Div Block to your page and name it something like Modal Wrapper.
  • Set the positioning to Fixed, with full width and height (100% each).
  • Set Display: Flex, Justify: Center, and Align: Center to center the modal content.
  • Add a semi-transparent background color (e.g., rgba(0, 0, 0, 0.6)) to create the overlay effect.
  • Set the initial Display to None so it doesn’t show on page load.

​

2. Create the Modal Content

​

  • Inside the Modal Wrapper, add another Div Block and name it Modal Box.
  • Style this box (e.g., set width, padding, background color, and border radius).
  • Add any desired content (heading, text, buttons, etc.) to this box.
  • Optionally, add a Close Button inside the Modal Box (e.g., a Text Block styled as “X” in the corner).

​

3. Create the Trigger Button

​

  • On your page, add a Button or any clickable element that will open the modal.
  • Give this element a unique class name such as Open Modal Button.

​

4. Add Interactions for Opening the Modal

​

  • Select the Open Modal Button.
  • Go to the Interactions panel and choose Mouse Click (Tap) trigger.
  • Add a new animation, and choose Start an Animation.
  • In the animation timeline, add a Display: Flex action for the Modal Wrapper, and then an Opacity action from 0% to 100% (with easing and duration if desired).

​

5. Add Interactions for Closing the Modal

​

  • Select your Close Button inside the Modal Box.
  • Add a new Mouse Click (Tap) trigger and create another animation.
  • In this animation, first animate Opacity from 100% to 0%, then use a Set Display: None action after the fade-out completes.
  • (Optional) Add the same interaction to the Modal Wrapper itself so clicking outside the box also closes the modal.

​

6. Ensure Proper Layering

​

  • Set a high z-index (e.g., 9999) on the Modal Wrapper to ensure it appears above all other content.

​

Summary

​

To create a modal in Webflow using CSS and positioning: use a fixed-position div with flex centering, style a nested box for content, hide the modal initially, and use Webflow interactions to toggle display and opacity.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are some third party tools or integrations that can be used with Webflow?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
Is there a reference or page that lists these .svg icons in Webflow? Is a membership required to access them? Is there anyone who can share icons like the example provided?
Is there a way to add anchor links to specific paragraphs in a blog post on Webflow without using ID's and creating sections?
How can I change the Webflow icon in my browser tab to reflect my branding?
Can Webflow run a script to detect iOS and only display a 'download now' button on iPads for a site designed for an iPad app?
How can I link to specific category pages like "all caps" or "all hoddies" from the navigation and breadcrumbs in my Webflow site?
How can I create a hero slider behind the nav bar and heading in Webflow without affecting their position?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I control the position of the anchor when using a sticky menu in Webflow? Specifically, I want to ensure that the heading appears above the sticky navigation. This issue is present on the Guests page of my site. My site Read-Only link is provided.
How can I make the hyperlinks in my rich text block within Webflow stick to the same line as the rest of the text, when the text is pulled from the collections editor?
How can I easily change the default styling of my website in Webflow without having to update each individual item? Is it possible to change the default font through CSS or with custom code in the head?
How can I customize the error and success messages that appear after clicking on a form button in Webflow?
Is it possible to create an infinite scroll carousel like the one in Ran Segall's case study using Webflow?
How can I get Vimeo videos to autoplay within a Rich Text element of a CMS item in Webflow? I've tried adding a Video element with the URL and also adding embedded code, but it's not working. Any suggestions? Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?