Skip to content
SkillCodex
Menu

Concept cluster

Modal surfaces

Compare a general modal task, a consequential decision, and focused media viewing with the page made inactive.

Try the 3 concepts, compare what changes, then use the Pack that fits your need.

Try the components

Modal surfaces

Try it

Is the task about acting, confirming a consequential decision, or viewing media?

Modal dialog

Shared trial context

A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.

Modal dialog

Mission

Modal dialog

Open the dialog, tab through every control, cancel with Escape, and verify focus returns to Edit member.

Live result

The dialog is closed. The page remains available.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
The edit form opens with its title announced and focus on the first useful field.
Edge case
A validation error keeps the dialog open, links the message to the invalid field, and moves focus only when submission fails.

What this example shows

Use a Modal dialog for a general contained task; use Alert dialog for a short consequential decision and Lightbox when viewing media is the task.

Use the Pack — Modal dialog

Which fits your need?

Modal dialog

Editing a compact record without losing page context

Alert dialog

Confirming a permanent deletion

Which component will you use here?
Read the full PackVerify the result
Difference and sources

Use a Modal dialog for a general contained task; use Alert dialog for a short consequential decision and Lightbox when viewing media is the task.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Backdrop

    The layer that separates a modal surface from inactive page content.

    The three concepts

    ConceptModal dialogA focused surface for a contained task that makes the rest of the page temporarily inactive.OpenConceptAlert dialogA modal dialog that interrupts a consequential action and requires an explicit confirm or cancel decision.OpenConceptLightboxA modal viewer that enlarges one media item and may let the user move through a related collection.Open

    The three comparisons

    ComparisonAlert dialog vs Modal dialogComparisonLightbox vs Modal dialogComparisonAlert dialog vs Lightbox

    Signals you are confusing them

    These descriptions fit every concept in the cluster, so none of them is enough to decide.

    • a centered overlay blocks the page behind it
    • a focused layer must be finished or closed before returning

    Other concept clusters

    Concept clusterMotion & EffectsConcept clusterSmall contextual surfacesConcept clusterEdge-attached surfacesConcept clusterChoose from a listConcept clusterChoices and binary statesConcept clusterChange view or reveal contentConcept clusterInform the userConcept clusterWait and track progressConcept clusterTrigger or navigateConcept clusterEnter textConcept clusterOrient within a journeyConcept clusterStructure and explore data