Skip to content
UX Atlas
Plate CMP·010 · ComponentGrid F1 · Rev. 2026-08-14

Modal Dialog

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

ComponentCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2The accessibility contract
  3. 3The contract a modal has to keep
  4. 4In practice
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • A decision genuinely blocks progress.
  • Confirming an irreversible action.
  • A focused sub-task that must complete before returning.

Common mistakes

  • Modals for information that could be inline.
  • Stacked modals.
  • Focus not returned on close.
  • Background content still reachable by keyboard.

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.

The contract a modal has to keep

Do

  • Move focus into the dialog on open, and back to the trigger on close.
  • Trap focus inside while it is open, and make Escape close it.
  • Give it a role, an accessible name, and mark the rest of the page as inert.
  • Ask before discarding unsaved input.

Do not

  • Open a modal from a modal.
  • Use one for a task long enough to need scrolling on a phone.
  • Close on an outside click when there is unsaved work.
  • Use a modal for something the reader did not initiate, which interrupts whatever they were doing.

In practice

  1. i.

    The modal that ate the form

    Accidental dismissal

    A half-completed dialog closed by a stray click outside it, discarding everything. Confirming before discard, or keeping the draft, turns an infuriating loss into a recoverable slip.

  2. ii.

    On a phone, it is a page

    Small screens

    A modal covering the whole viewport on mobile is a page with worse history behaviour: back does not close it, and the scroll position underneath is often lost. At that size, a route is usually the better answer.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Drawer and Sheet

Component

A panel anchored to one edge, holding secondary content without taking the page away.

Key difference

A modal blocks the page until it is answered. A drawer slides in beside the page and leaves the context it came from visible, which makes it the weaker interruption and the better panel.

Use Modal Dialog when

  • The decision genuinely cannot wait, such as a destructive confirmation.
  • The task is short and finishes in one step.
  • Seeing the page behind it would not help.

Use Drawer and Sheet when

  • The reader needs the underlying content while they work.
  • The panel holds filters, details or a long form.
  • They may reasonably leave it open across several actions.

Learn about Drawer and Sheet

vs.

Popover

Component

A small anchored panel holding controls, dismissed by clicking away.

Key difference

Both are overlays, and that is where the resemblance ends. A modal takes the page hostage until it is answered. A popover is anchored to what opened it, dismisses on outside click or Escape, and leaves the page usable.

Use Modal Dialog when

  • The answer is required before anything else can continue.
  • The consequence is serious, such as a destructive confirmation.
  • Losing it by clicking elsewhere would be a mistake.

Use Popover when

  • The content belongs to the trigger and explains or extends it.
  • Dismissing it by clicking elsewhere should be harmless.
  • The task is optional and takes seconds.

Learn about Popover

Local chart

CMP·010 · Region III · Grid F1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

User Control and FreedomHEUR·003 · PRINCIPLES BEHIND THISFlowPSY·005 · PRINCIPLES BEHIND THISElevationFND·048 · PRINCIPLES BEHIND THISFigure and GroundFND·009 · PRINCIPLES BEHIND THISFocus ManagementA11Y·004 · DEPENDS ONKeyboard NavigationA11Y·002 · DEPENDS ONCommand PalettePAT·018 · OFTEN USED WITHConfirmationPAT·008 · OFTEN USED WITHNotificationsPAT·015 · OFTEN USED WITHDrawer and SheetCMP·011 · ALTERNATIVE APPROACHPopoverCMP·012 · COMMONLY CONFUSED WITHFocus TrapTERM·078 · SHORT DEFINITION

Sources

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

  1. [1]

    Dialog (Modal) Pattern

    W3C, ARIA Authoring Practices Guide

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.

Short definition

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

Related concept

Connected closely enough to change how you apply this.