Modal window

A window that appears over the page. Until you close it, you can’t do anything else on the page.

Also called: modal, modal window, modal dialog, popup, pop-up, pop up, dialog, dialog box, overlay, window on top, dimmed background, side panel

What it is for

A modal (or dialog) appears when you need an answer right now: confirm a deletion, enter an email, read a warning. The page behind it is dimmed and doesn’t respond to clicks. A side panel and a bottom sheet work in a similar way.

Where you see it

• Confirmations — “Delete file? This can’t be undone”
• Online stores — quick product view, and filters from the side
• Sites with accounts — the log in and sign up window

What it is called in code

• <dialog>
• Dialog
• Sheet / Drawer

See also

• Bottom sheet — A panel that slides up from the bottom edge of the screen over the current content, used for extra actions or settings.
• Toast (notification) — A small message that pops up briefly at the bottom or in a corner of the screen and disappears on its own.
• Alert banner — A colored strip on the page with an important message: information, success, a warning or an error.