Behavior comparison
Choose Lightbox for: Inspecting product photography at a larger size. Choose Modal dialog for: Editing a compact record without losing page context.
| 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 with aria-modal=true containing figure content | dialog with 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. |