Behavior comparison
Alert dialog vs Lightbox
Decisive difference
Alert dialog interrupts for a decision to confirm or cancel; Lightbox enlarges a media item and lets the user browse a collection.
Choice criteria, links and sources
- Alert dialogChoose Alert dialog if the user must decide before a consequential action.Open entry Alert dialog
- LightboxChoose Lightbox if viewing media at a larger size is the task, with no consequential decision.Open entry Lightbox
See the nine dimensionsSee the sources
Modal surfaces
Try it
Is the task about acting, confirming a consequential decision, or viewing media?
Alert dialog
Shared trial context
A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.
Alert dialog
Mission
Alert dialog
Open the warning, read the named consequence, cancel with the keyboard, then reopen and confirm deliberately.
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 warning names the workspace, explains permanent loss, and initially focuses the safer Keep it action.
- Edge case
- While deletion is submitting, both actions prevent duplicate activation and the dialog reports the pending state.
Lightbox
Mission
Lightbox
Open the second image, move to the next one with the keyboard, then close and return to the same thumbnail.
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 selected photograph is enlarged with its caption, position in the set, and navigation controls.
- Edge case
- A failed image load preserves the caption and navigation, reports the failure in text, and never leaves an empty modal.
What this example shows
An Alert dialog is for a short consequential decision, not a general form and not a media viewer.
Which fits your need?
Alert dialog
Confirming a permanent deletion
Lightbox
Inspecting product photography at a larger size
Difference and sources
An Alert dialog is for a short consequential decision, not a general form and not a media viewer.
Read the sourcesParts 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.
Decision
Family question
Is the task about acting, confirming a consequential decision, or viewing media?
Three criteria to choose
- Use case
Alert dialog
Confirming a permanent deletion
Lightbox
Inspecting product photography at a larger size
- Focus
Alert dialog
Initial focus lands on the least destructive useful action unless reading long consequences first is safer.
Lightbox
Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail.
- Dismissal
Alert dialog
Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it.
Lightbox
The named close control and Escape always dismiss; outside press is optional and never the only path.
Nine dimensions
- Trigger
Alert dialog
A consequential action reaches the point where explicit confirmation is required.
Lightbox
Selecting a thumbnail or media preview opens focused viewing.
- Modality
Alert dialog
Strictly modal; no background interaction is available before a decision.
Lightbox
Modal media viewer; the underlying page is temporarily inactive.
- Placement
Alert dialog
A compact, prominent viewport surface close to the current decision context.
Lightbox
Media is centered or fitted within a viewport overlay with nearby controls.
- Interactivity
Alert dialog
Offers explicit confirm and cancel decisions; it does not vanish on a timer or casual outside press.
Lightbox
May provide previous, next, zoom, caption, and close controls around the media.
- Focus
Alert dialog
Initial focus lands on the least destructive useful action unless reading long consequences first is safer.
Lightbox
Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail.
- Dismissal
Alert dialog
Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it.
Lightbox
The named close control and Escape always dismiss; outside press is optional and never the only path.
- Accessible role
Alert dialog
alertdialog[aria-modal=true]
Lightbox
dialog[aria-modal=true]
- Use case
Alert dialog
Confirming a permanent deletion
Lightbox
Inspecting product photography at a larger size
- Mobile behavior
Alert dialog
Keep the consequence readable and separate destructive and safe actions into large targets.
Lightbox
Fit media to the safe viewport and pair optional gestures with named, tappable controls.
| Dimension | Alert dialogAlert dialog | LightboxLightbox |
|---|---|---|
| Trigger | A consequential action reaches the point where explicit confirmation is required. | Selecting a thumbnail or media preview opens focused viewing. |
| Modality | Strictly modal; no background interaction is available before a decision. | Modal media viewer; the underlying page is temporarily inactive. |
| Placement | A compact, prominent viewport surface close to the current decision context. | Media is centered or fitted within a viewport overlay with nearby controls. |
| Interactivity | Offers explicit confirm and cancel decisions; it does not vanish on a timer or casual outside press. | May provide previous, next, zoom, caption, and close controls around the media. |
| Focus | Initial focus lands on the least destructive useful action unless reading long consequences first is safer. | Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail. |
| Dismissal | Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it. | The named close control and Escape always dismiss; outside press is optional and never the only path. |
| Accessible role | alertdialog[aria-modal=true] | dialog[aria-modal=true] |
| Use case | Confirming a permanent deletion | Inspecting product photography at a larger size |
| Mobile behavior | Keep the consequence readable and separate destructive and safe actions into large targets. | Fit media to the safe viewport and pair optional gestures with named, tappable controls. |