ui patterns
Modal dialog
What is a modal dialog?
A modal dialog overlays the page and requires a decision before you can proceed - everything behind it is disabled. Used well, it focuses attention; used poorly, it traps the keyboard and loses users entirely.
Also known as: modal, dialog box, lightbox
Prefer to watch?
Watch the recap 0:37
The demo
Click "open dialog", then drive it with the keyboard - Tab to move, Esc to close. In broken mode, Tab escapes to the link behind and Esc is ignored; in accessible mode, focus stays put and comes back when you close.
Click "open dialog" to begin.
Background content. A link behind the dialog - in broken mode, Tab can still reach this while the dialog is open.
What this demo shows (text version)
An "open dialog" button and a link sitting in the background. Opening the dialog shows a small window with a text field, a cancel button, a confirm button and a close control, over a dimmed page.
In accessible mode, opening the dialog moves focus into it, the Tab key cycles only through the dialog's controls, Escape closes it, and focus returns to the "open dialog" button. In broken mode, focus never enters the dialog, Tab can reach the background link while the dialog is still open, and Escape does nothing - so a keyboard user can be stranded or lose the dialog completely. A running line reports what focus is doing throughout.
A modal dialog overlays the page and requires a decision before you can proceed, with everything behind it disabled. Used well, it focuses attention - but it must handle keyboard focus properly: move focus in, trap Tab inside, close on Escape, and return focus - or it strands the very people it should serve.
In the broken dialog, Tab leaked out to the page behind and Escape did nothing - so a keyboard user could lose the dialog, or get stranded in it. The accessible one kept focus inside, closed on Escape, and handed focus back to the button you came from. Same window; completely different experience depending on who is at the keyboard.
A modal makes three promises to the keyboard: focus moves into it on open, focus is trapped inside while it is open (Tab cycles, it never reaches the page behind), and focus returns to the trigger on close. Escape must close it, and the markup needs role="dialog" with aria-modal="true". Miss any of these and sighted mouse users may never notice, while keyboard and screen-reader users are stuck.
My rule: reach for a modal only when the decision genuinely cannot wait. Every modal interrupts, steals focus and hides context; that is the cost. If the content could live on the page, or in a non-blocking panel, it usually should - a dialog you can't dismiss with Escape is a small prison.