Webflow launches native modals and popovers

Two elements Webflow was sorely missing

How much time have you already spent cobbling together a popup with custom interactions, a third party plugin, or a chunk of embedded code, just to show a tooltip or a confirmation window? Webflow has just put an end to that workaround with two new native elements: the popover and the modal.

In practical terms, you will now find them directly in the elements panel on the left sidebar. A simple drag and drop is all it takes to place them on your page, with no custom code and no external tool to connect.

Popover and modal: two distinct use cases

These two elements serve different needs, and Webflow designed them accordingly.

• The popover appears next to the button that opens it, without blocking the rest of the page: ideal for a dropdown menu, a tooltip, or an options panel.
• The modal takes control of the screen until it is closed: perfect for a sign up form, a confirmation, or a business proposal that deserves the visitor’s full attention.

Both animate easily thanks to GSAP: just turn on the animated open and close option in the settings, then fine tune the motion in the Interactions panel. You can even trigger a popover on button hover, with no logic to configure by hand.

What this changes under the hood, without you having to think about it

Under the hood, these elements rely on browser standards rather than a Webflow specific layer or a third party script. Popovers use the native Popover API, and buttons open them through declarative commands, which means no JavaScript is needed at all. Modals, meanwhile, rely on the dialog tag, which lets the browser make the rest of the page inert, manage focus and the Escape key, and return focus to the original button once closed.

Another concrete benefit: both elements render in the browser’s top layer, which saves you from the usual z-index conflicts. And you still keep full control over styling, since a modal’s backdrop (::backdrop) and a popover’s open state (:popover-open) can be styled directly in the Style panel.

Mazette.co’s take

Let us be honest: this was a long standing blind spot for Webflow. Building a simple tooltip or a lead capture modal often meant detouring through complex interactions, an external plugin, or custom code, with all the fragility that comes with every site update. This new feature fills a genuine gap, and it does so smartly: by relying on native browser standards rather than a Webflow proprietary solution.

We particularly like the technical choice here. Betting on the Popover API and the dialog tag guarantees better accessibility by default (focus management, Escape key handling) and lighter pages, since no JavaScript is required to make them work. This is exactly the kind of improvement that simplifies our clients’ lives without adding maintenance complexity to their site.

Our only reservation: it remains to be seen in practice whether these native elements fully replace the need for more advanced solutions in very specific cases, such as popup sequences conditioned on a precise behavior. But for the vast majority of use cases, menus, tooltips, sign up forms, this feature will clearly speed up interface design on Webflow.

{{webflow}}

{{seo-aeo}}