Modal dialog
/MOH-dul DY-uh-log/ · noun · OVERLAY pattern · #059
A window that dims the world and demands an answer before anything else can happen. Powerful and rude — spend it only on decisions that truly block.
Also called: modal window, dialog box, popup dialog, popup, confirmation dialog, confirmation modal.
You might call it
- “a pop-up window that blocks the page”
- “the pop-up box asking “Are you sure?””
- “a confirmation popup”
- “the box in the middle of the screen with OK and Cancel”
- “a popup that greys out the background”
…its name is Modal dialog.
Common questions
What is the popup window that blocks the rest of the page called?
A modal dialog: it dims the page and requires an answer before anything else can happen. If it can be dismissed by clicking anywhere else, it is closer to a non-modal dialog or popover.
What is a modal in web design?
A window that opens on top of the page and blocks it, usually over a dimmed backdrop, until you respond or close it. It is used for confirmation dialogs (“Delete this file?”) and short, focused tasks.
Modal vs popup: what is the difference?
“Popup” is the everyday word for anything that appears on top of a page. A modal is the kind that blocks the page behind it until it is dismissed; non-modal popups such as toasts and popovers let you keep working.
In code
| SwiftUI | .alert() .sheet() |
|---|---|
| UIKit | UIAlertController present(_:animated:) |
| Jetpack Compose | AlertDialog Dialog |
| Android (Views) | MaterialAlertDialogBuilder DialogFragment |
| Flutter | showDialog() AlertDialog |
| Web (HTML / ARIA) | <dialog> showModal() aria-modal="true" |
Prompt for your AI coding tool
Add a modal dialog for this decision: a centered box over a dimmed backdrop with a short title, one or two sentences, and two buttons — the safe choice (Cancel) and the action, labelled with its verb (for example “Delete file”). While it is open the page behind cannot be used; focus moves into the dialog and stays there, Escape cancels, and focus returns to the button that opened it. On the web, use <dialog> with showModal().
More UI words to use when vibe coding →