Modals, Dialogs & Sheets
Somebody opens a pricing page to check a number. A cookie bar rises from the bottom, a newsletter modal fades in over the table, and behind it a chat widget expands to ask whether they need help.
Pop-ups that help instead of annoy: a lesson for your next walk.
Listen to the full Modals, Dialogs & Sheets course on DesignPath
They came to read one figure. Three separate components have now stopped them, each added by a different team with a defensible reason, and none of them knowing about the others.
A modal is the loudest thing you can put on a screen. It stops the task, hides the page behind it, and refuses to leave until it gets an answer. That is why it works when it is earned, and why it is resented when it is not.
Anatomy of a Modal
Three words get used for the same box, and the differences between them decide what the box is allowed to do.
Modal, Dialog, Sheet
A dialog is any box that appears over the page to ask something or say something.
A modal dialog is one that takes the page away until it is dealt with. That is what the word means: the interface has entered a mode, and only one thing in it is live. A non-modal dialog leaves the page usable underneath. And a sheet is a dialog anchored to an edge of the screen rather than floating in the middle, which is the shape a phone wants and article 5 covers.
The important pair is modal against non-modal. Every rule that follows exists because the modal version has taken something away.
The Six Parts
Four are always there and two are conditional.
The overlay, the dimmed layer that covers the page. The container holding the content. The title, naming the task rather than the area. The body. The actions, usually two, labeled with outcomes. Apple's Human Interface Guidelines hold to two on an alert for the same reason, since a third turns a quick decision into a reading task. And a close control, which most dialogs need and a few deliberately do not.
The Three Ways Out
A modal has taken the page, so it owes a way back, and there are three.
A close control in the corner. Escape on a keyboard. And a click on the overlay, outside the container. Somebody reaching for one of the three and finding nothing describes the experience as being trapped. That is the most common complaint about the pattern, and the subject of articles 4 and 6.
The Property Everything Follows From
One sentence generates the rest of the module.
A modal stops the person doing anything else until they answer. That is why it has to be worth the interruption, which is article 3. Why the title has to name the task, since they arrived without asking. Why the actions have to say what they do, since there is no undo yet. Why focus has to move into it and come back out, which is article 6. And why two of them stacked is a bug rather than a layout.
Pro tip: Say out loud what your modal takes away and what it gives back. If the honest answer is that it takes the page and gives a message, it was never a modal, and the next article covers what it should be.