Fig. 18 / Modal · In motion
Web UI Patterns
Modal
EXPLAINED SIMPLY:The box that stops everything until you deal with it.
A modal is the box that appears in the middle of the screen, grays out everything behind it, and refuses to let you continue until you deal with it. "Are you sure you want to delete this?" lives in a modal.
The word comes from "mode": while it's open, the app is in a different mode and the rest of the page is locked. That lock is the pattern's whole personality. A modal is an interruption by design, so it should be saved for things that genuinely cannot wait, like confirming something destructive or finishing a payment.
The gray see-through layer behind it has a name too: the scrim (some people say overlay). Clicking the scrim usually closes the modal, which is a small kindness worth asking for.
You'll hear its cousins named dialog (the older, more formal word), popup (the sloppy catch-all), and lightbox (a modal whose only job is showing an image big). If the box appears but you can still scroll and click the page behind it, it isn't a modal, it's just a floating panel.
When you want "stop the user and make them decide," ask for a modal. When you don't want to stop them, ask for anything else.