Behavior comparison
Lightbox vs Modal dialog
Decisive difference
Lightbox is a composition dedicated to media; Modal dialog hosts a contained task such as a form.
Choice criteria, links and sources
- LightboxChoose Lightbox if viewing or browsing images or videos is the primary task.Open entry Lightbox
- Modal dialogChoose Modal dialog if the user fills in a form or completes another contained task.Open entry Modal dialog
See the nine dimensionsSee the sources
Modal surfaces
Try it
Is the task about acting, confirming a consequential decision, or viewing media?
Lightbox
Shared trial context
A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.
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.
Modal dialog
Mission
Modal dialog
Open the dialog, tab through every control, cancel with Escape, and verify focus returns to Edit member.
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
Lightbox is a media-specific modal composition; a general Modal dialog handles tasks and an Alert dialog handles a consequential decision.
Which fits your need?
Lightbox
Inspecting product photography at a larger size
Modal dialog
Editing a compact record without losing page context
Difference and sources
Lightbox is a media-specific modal composition; a general Modal dialog handles tasks and an Alert dialog handles a consequential decision.
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
Lightbox
Inspecting product photography at a larger size
Modal dialog
Editing a compact record without losing page context
- Focus
Lightbox
Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail.
Modal dialog
Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener.
- Dismissal
Lightbox
The named close control and Escape always dismiss; outside press is optional and never the only path.
Modal dialog
Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless.
Nine dimensions
- Trigger
Lightbox
Selecting a thumbnail or media preview opens focused viewing.
Modal dialog
An explicit action starts a short, contained task.
- Modality
Lightbox
Modal media viewer; the underlying page is temporarily inactive.
Modal dialog
Modal; the rest of the page becomes inert until the task is closed.
- Placement
Lightbox
Media is centered or fitted within a viewport overlay with nearby controls.
Modal dialog
A viewport surface, commonly centered, with internal scrolling when needed.
- Interactivity
Lightbox
May provide previous, next, zoom, caption, and close controls around the media.
Modal dialog
Supports a focused set of form controls and actions inside a contained focus scope.
- Focus
Lightbox
Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail.
Modal dialog
Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener.
- Dismissal
Lightbox
The named close control and Escape always dismiss; outside press is optional and never the only path.
Modal dialog
Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless.
- Accessible role
Lightbox
dialog[aria-modal=true]
Modal dialog
dialog[aria-modal=true]
- Use case
Lightbox
Inspecting product photography at a larger size
Modal dialog
Editing a compact record without losing page context
- Mobile behavior
Lightbox
Fit media to the safe viewport and pair optional gestures with named, tappable controls.
Modal dialog
Use most of the available width, preserve safe areas, and keep focused fields above the keyboard.
| Dimension | LightboxLightbox | Modal dialogModal dialog |
|---|---|---|
| Trigger | Selecting a thumbnail or media preview opens focused viewing. | An explicit action starts a short, contained task. |
| Modality | Modal media viewer; the underlying page is temporarily inactive. | Modal; the rest of the page becomes inert until the task is closed. |
| Placement | Media is centered or fitted within a viewport overlay with nearby controls. | A viewport surface, commonly centered, with internal scrolling when needed. |
| Interactivity | May provide previous, next, zoom, caption, and close controls around the media. | Supports a focused set of form controls and actions inside a contained focus scope. |
| Focus | Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail. | Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener. |
| Dismissal | The named close control and Escape always dismiss; outside press is optional and never the only path. | Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless. |
| Accessible role | dialog[aria-modal=true] | dialog[aria-modal=true] |
| Use case | Inspecting product photography at a larger size | Editing a compact record without losing page context |
| Mobile behavior | Fit media to the safe viewport and pair optional gestures with named, tappable controls. | Use most of the available width, preserve safe areas, and keep focused fields above the keyboard. |