Popovers & Modals

Dropdown menus. Tooltips. Pop-up signup forms. They all do basically the same thing: show something ON TOP of your page.

‍

But in Webflow, you’ve got TWO elements for this: Popovers and Modals. They LOOK similar, but they actually behave VERY differently.

‍

The good news is that both are built on native browser behavior. So there’s no JavaScript to wire up, no z-index to fight with, and keyboard accessibility comes built in.

‍

In this lesson, we'll cover three things:

How to use the popover element,

How to use the modal element,

And finally, we'll talk about when to use each.

‍

How to use a popover

Okay, first part: Popovers.

‍

Here’s a landing page. We’ve added a Product button already, and we want it to open a mega menu.

‍

Let’s start by adding a Popover element (we can just drag it anywhere on our site and it’ll show up here, in the center of the canvas). Now we can just add the content we need in our mega menu. To save some time, I’ve skipped ahead and added in our content. We have three columns, with a few links under each category. But you can put whatever you want in here. You can build this the same way you would any other Webflow layout—by dragging in and adding styles.

‍

One thing worth doing: give the popover a descriptive name, like “Nav popover,” so it’s easy to find when we connect the trigger. Most of the time, you’ll want a semantic tag (like Nav for a menu) because that gives browsers and screen readers context about what this thing IS.

‍

Next, let’s connect it to the Product button. Let’s select the Product button... click on the settings icon... and instead of linking to a URL or a page, we’ll choose Popover. And if you’ve noticed, this is a button— not a link element. If we had a link element here, we wouldn’t have the options of popover or modal... But, since this is a button, we can select Popover... that gives us three options: Toggle, Show, or Hide.

‍

Toggle opens it if it’s closed, and closes it if it’s open. Show only opens. Hide only hides. We’ll go with Toggle, and for the target, we’ll pick our Nav popover.

‍

Last thing: the anchor (we need to define HOW this looks when it’s open). With the popover element selected, head over to the Style panel and under position, there are some new options.

‍

By default it’s set to Auto, and we can see the popover moved positions to anchor to our Product button (since it is now the trigger). Now, we can adjust the position settings to get this exactly where we want it. That’s looking good.

‍

Let’s head into preview mode to see it in action. Click Product... and there’s our mega menu. Click again, and it closes. We can also hit the Escape key to close it, and we can tab through the links with our keyboard.

‍

And because the browser is handling ALL of this, if we have multiple popovers—let’s say this nav button next to our original also has a popover—if we click on it? The other one closes automatically. We don’t have to mess with any more settings or do any of that stuff ourselves.

‍

That’s how Auto mode works, and you’ll find it in the Settings panel under Popover settings. An Auto popover also closes when we click outside of it. If we switch the mode to Manual, the popover only closes when we click the button again, and opening one won’t close the others. Which can get annoying.

‍

One more thing to notice: the page behind the popover is still interactive. We can still click the things underneath it. We’ll revisit this when we compare with modals.

‍

Speaking of which, let’s take a look at modals.

‍

A modal also pops over the page, but it’s DIFFERENT in that forces the user to FOCUS. On our landing page, we want a modal with a form where the user can sign up for updates.

‍

Again, let’s add a Modal element (anywhere on the canvas is fine). And same as before, I’m going to skip ahead and add the content we need. We can see all of this right on the canvas. We’ve also gone into the states and styled the backdrop (we’ve also added a backdrop filter, so we add MORE focus to the modal). Again, you can style this however you’d like.

‍

Now, there’s one thing every modal NEEDS: a way to close it. We can see here, I’ve already added a close button (again, the trigger must be a button element for this to work) and I’ll show you how to connect it. We just need to go into its settings, set its type to Modal, set the target to our Modal element, then Close. Now when we click on this button, it will CLOSE the modal.

‍

To open it, we’ll head back and select our “Start free trial” (or CTA button). Same idea as before: instead of a URL, set the type to Modal, target our modal element, and set the action to Open, if it isn’t already.

‍

And here’s a nice bonus: the modal can just LIVE on the page. We don’t have to do anything fancy. We can have a second button in the hero, and a third one down in the footer, and they can all target the SAME modal.

‍

Okay, let’s try it in preview mode. Let’s click on the CTA... and there’s our modal. Now, notice what happens when we click outside of it. Nothing. It stays open, and we have to close it ourselves with our close button. We can also hit Escape on our keyboard (that’s how the HTML spec works, for accessibility reasons).

‍

And if we start tabbing with our keyboard, our focus stays INSIDE the modal. It doesn’t escape out into the page behind it. That’s what we meant earlier by it forces the user to focus.

‍

That’s building them. Let’s talk about WHEN to use them.

‍

Popovers and modals...They LOOK similar, but they’re built for different jobs. Here’s how to think about it.

‍

A popover is lightweight. It sits next to its trigger, and the rest of the page stays usable. That makes it perfect for things like dropdown menus, tooltips, and fly-out menus.

‍

A modal DEMANDS attention. It holds the users’ attention, and it has to be closed on purpose. That makes it a good fit for things the user needs to deal with BEFORE moving on, like a signup form, a confirmation, or any important message.

‍

So as you’re building, ask yourself: does the user need to keep working with the page behind it? If yes, use a popover. If they need to do something first before going through the rest of the site, use a modal.

‍

Popovers and modals are built on the browser’s own behavior, so you get a lot of accessibility and keyboard support without the extra work. It’s not everything, though. For example, a modal should have an accessible name, which you can set with an aria-label or aria-labelledby custom attribute. And there’s a lot of flexibility here, from tooltips to flyout menus to forms. There are no presets for these patterns by default, so the Webflow MCP is a good way to create them. You can ask your AI assistant to build common patterns for you. There’s so much more you can do with popovers and modals (like adding delay to a modal opening using interactions powered by GSAP), so be sure to check out Webflow University to learn more.

And that’s the lesson. We showed you have to use a popover element, a modal element, and we also talked about how to decide when to use each.

‍

But that’s popovers and modals in Webflow.

‍