Modal

The Modal element shows content in a centered window on top of your page, over a dimmed backdrop. You could call it a lightbox or popup too. It’s built for moments that need the visitor’s attention before they carry on — a confirmation, a sign-in prompt, a cookie or age gate, or an important notice.

While a Modal is open, the rest of the page steps back: it dims, stops scrolling, and can’t be clicked until the Modal is dismissed. You add a Modal from the Add panel like any other element, and you open and close it with interactions.

Structure

A Modal is made of two parts:

• Window — the content card in the center. This is where your content goes. A window behaves like any other element: you can style it, duplicate it, wrap it in a div or a link, and save it as a component. A Modal can hold more than one window.
• Overlay — the dimmed backdrop behind the window. It’s also the click-to-close area when your Close on setting allows it. Every Modal has exactly one overlay: it can’t be deleted or turned into a component, and Mosaic adds one back automatically if it ever goes missing.

A brand-new Modal already comes with everything it needs to work:

• A Window pre-filled with a heading, a short line of text, and a Got it button that closes the Modal.
• An Overlay.
• A gentle fade animation for opening and closing.
• An Open on setting of Page load, so the Modal is visible the moment you add it. A Modal that opens on nothing would never appear, so this gives you something to see and style right away — change it whenever you’re ready.

Everything in the window is yours to edit or remove — the heading, the text, and the button are just a starting point.

Adding a window

Select the Modal and use the Add window button in its toolbar to add another window. Windows added this way come in empty, ready for your own content.

Opening and closing the Modal

There are two ways to control a Modal: the quick Open on setting for opening it automatically, and interactions on your own buttons for opening or closing it on click.

Open on

The Open on setting at the top of the Modal’s settings is the fastest way to make a Modal appear on its own. Pick when it should open:

• Page load — open as the page loads. You can add a Delay so it appears a few seconds in.
• Exit intent — open when the visitor looks like they’re about to leave.
• Scroll depth — open once the visitor has scrolled a set distance down the page.

You can also add a run rule to an Open on trigger — for example, open only once per visitor — so a welcome or promotion doesn’t reappear on every visit. The rule counts per Modal, so a duplicated Modal is tracked on its own.

Open and Close from any element

To open or close a Modal from a button (or any other element), add an interaction to that element and choose an action from the Element actions section, under Modal:

• Open — opens the Modal you point it at.
• Close — closes the Modal.

Open always points at a specific Modal, so you can open a Modal from a button anywhere on the page. Close is smart about where it sits: placed on an element inside a Modal, it acts on that Modal automatically — which is exactly how the built-in Got it button closes its own Modal, with nothing to configure.

The Modal actions only show up when the element you’re on can actually reach a Modal, so you won’t see them where they wouldn’t do anything.

Settings

Close on

The Close on setting decides how a visitor can dismiss the Modal:

• Everything (default) — the visitor can close it by clicking the overlay or pressing Esc.
• Overlay click — only clicking the overlay closes it.
• Esc — only the Esc key closes it.
• Nothing — neither the overlay nor Esc closes it.

Animation

How a Modal opens and closes is animated with its own interaction, listed as Modal visibility change. It has three moments you can animate:

• Show — plays as the Modal opens.
• Before close — plays as the Modal closes. Mosaic waits for it to finish before the Modal actually goes away, so your exit animation is never cut off.
• After close — runs after the Modal has closed, for anything you want to happen once it’s gone.

Every new Modal comes with a soft fade — it fades in on Show and fades out on Before close. You’re free to change it to any animation you like, or remove it entirely, in which case the Modal opens and closes instantly. Because the animation is a normal interaction, you build it the same way you would any other, using the timeline and animation options.

The moment a Modal starts closing, the page behind it becomes usable again — the overlay stops blocking clicks and the page can scroll — so a longer exit animation never leaves the visitor locked out while it plays.

Accessibility settings

The Modal has its own Accessibility settings group with two fields:

• Accessible label — the name screen readers announce for the Modal. It supports dynamic values, so the label can reflect the page or content it belongs to.
• Role — the accessibility role. It suggests dialog and alertdialog, but you can type any value. Left blank, the Modal keeps its built-in dialog role, so you only need to set this for a specific case.

You don’t have to manage keyboard focus yourself. While a Modal is open, Tab stays inside the window and loops around at the ends, and focus moves to the first field automatically. When the Modal closes, focus returns to wherever it was before.

Styling the Modal

You style a Modal by selecting its parts. The Window carries the card look — background, padding, rounded corners, shadow, width — and the Overlay carries the backdrop, so you can change how dark or tinted it is. Mosaic’s built-in styling is intentionally light, so your own styles always win without a fight.

The base style of each part is how it looks while the Modal is open, so what you see on the canvas is what visitors get. You can also style the while-open state separately when you need to.

In the editor, the Modal stays visible on the canvas so you can style and edit it in place — there’s no page lock or scroll lock while you work. To reach the overlay for styling, select it from the layer tree.