component
Modal dialog
also called modal
A window that opens over the page and takes control of it, so nothing behind can be used until the dialog is answered or dismissed.
Modality is the whole word. “Dialog” only says a window appeared; “modal” says the rest of the interface has been switched off while it is there. The scrim is how that gets communicated: the page is still visible, still recognisable, and out of reach.
That cost is why the pattern is worth being strict about. A modal is right when continuing without an answer would be wrong, and expensive when it is used to present something the user could just as well have read in place. If the content is optional, a popover or a drawer leaves the page working.
Three obligations come with the pattern, and all three are commonly missed: focus
moves into the dialog when it opens, focus is kept inside it while it is open (see
focus trap), and Escape closes it. The platform now gives you these
for free through dialog.showModal(), which is a good reason to start there rather
than with a positioned div.
An alert dialog is the narrower case: same modality, but the content is a warning and the answer is a decision, so it is announced more assertively.
Which word?
| If you want | say |
|---|---|
| a window that blocks the page until it is dealt with | modal dialog |
| a small anchored surface with controls inside it | popover |
| a panel that slides in from an edge and can stay open | drawer |
| a dialog that announces itself and blocks until answered | alert dialog |
| peeking at an item without leaving the list | quick view |
| a panel that rises from the bottom edge | bottom sheet |
Related
Variants: Confirmation dialog · Tearsheet
See also: Focus trap · Inert · Initial focus · Scrim · Lightbox · Top layer · Interstitial
Implementations
Specimens illustrate the concept; for production use, start here.
| aria-apg | Dialog (Modal) |
| material | Dialogs |
| radix | Dialog |
| base-ui | Dialog |