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.

LightboxChoose Lightbox if viewing or browsing images or videos is the primary task.
Modal dialogChoose Modal dialog if the user fills in a form or completes another contained task.

Decision

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

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.

Lightbox vs Modal dialog

Lightbox is a composition dedicated to media; Modal dialog hosts a contained task such as a form.

LightboxChoose Lightbox if viewing or browsing images or videos is the primary task.
Modal dialogChoose Modal dialog if the user fills in a form or completes another contained task.

Nine dimensions

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.