Modal
Also called: dialog, modal dialog, popup.
A box that opens on top of the page and blocks it until you close it. The dark see-through layer behind it is the backdrop. Use it when the user must decide or read something before continuing.
This opens a real modal over the whole page. Close it with Esc, the backdrop or a button.
Say it in a prompt
A modal dialog that fades in and scales up from 96% over a semi-transparent dark backdrop. It closes on Esc, on a backdrop click or with a close button, and keeps keyboard focus inside while open. Seen on
- Apple iPhone: Pressing + on a feature card opens a details window over the page, and the page behind it is blurred.
- Stripe: Clicking a product card in the bento grid opens a large window with more details and an X to close it.
You might describe it as
- you click the plus on a card and a box opens over everything
- window that pops up in the middle and darkens everything behind
- are you sure box before deleting
- box on top of the page that I have to close first
Not to be confused with
- Backdrop
The modal is the box on top; the backdrop is the dark layer behind it.
- Drawer
A modal appears in the middle; a drawer slides in from an edge.
- Toast
A modal blocks the page until you close it; a toast is a small message that goes away by itself and blocks nothing.
- Lightbox
A modal holds text and buttons you must answer; a lightbox shows a photo large, with arrows to the next one.
- Command palette
A modal asks you to read or decide something; a command palette is a search box for actions that closes once you pick one.