Skip to content
UX Atlas
ComponentCraft conventionIntermediate

Modal Dialog

Blocks everything else, which is why it should be reserved for things that genuinely cannot wait.

Definition

A modal dialog interrupts the current task and prevents interaction with the rest of the page until it is dismissed. That interruption is its cost and its only justification.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. The accessibility contract
  3. Sources
  4. Continue from here

The accessibility contract

  • Move focus into the dialog when it opens, usually to the heading or the first control.
  • Trap focus inside while it is open.
  • Return focus to the triggering element on close.
  • Escape closes it, unless closing would lose data, in which case confirm.
  • Mark it with role dialog and aria-modal, and give it an accessible name from its heading.
  • Make content behind it inert, so it is not reachable by keyboard or exposed to assistive technology.
  • The native dialog element with showModal handles most of this, including the top layer.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

An Enterprise WorkflowAn Onboarding Flow

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

  • Drawer and SheetComponent

    Both interrupt. A drawer keeps the context visible behind it.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.