Lightbox
灯箱
Aliases:图片灯箱大图预览图片放大预览看大图lightbox
What is it
A media overlay that enlarges an image or video over a dimmed, temporarily inert page. The media is centered and usually paired with prev/next, zoom and close. It is a modal specialised for viewing rather than for forms or copy — that is what separates it from a generic dialog.
Name disambiguation
A lightbox is a media-focused Modal; Modal is the generic container. A lightbox opens something to look at, a dialog opens something to deal with.
Interactive playground
Try it. Make an informed choice.Open the lightbox over a photo set, step with arrows and try zoom and close.
Loading lab…
What to look for
- 01Outside click or Esc closes; focus returns to the thumbnail
- 02Failed image or video states carry a replacement message
✓ When to use
- Inspecting image detail, full-size originals or photo sets
- Video must play focused, free of the page layout
- Thumbnails are expected to open a larger preview on click
✕ When not to use
- Content is a form, message or confirmation — use a modal
- Users must act on the page while looking — use a drawer or popover
- Media is the page itself — use a gallery page or player page
Variants
Image zoom
图片放大
One image full-screen with zoom or pan for detail
Gallery
画廊切换
Arrows plus a counter to step through a set
Video lightbox
视频灯箱
Video plays inside the overlay, often autoplaying to full screen
Implementation
position: fixedobject-fit: containz-indexbackground-colorFix a dimmed backdrop across the viewport and center the media with object-fit: contain so nothing is cropped. Lock page scroll and trap focus while open; arrows and Esc work from the keyboard. Cross-fade between items rather than sliding hard, and respect prefers-reduced-motion.
Platform API
<dialog>role="dialog"aria-modal="true"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA APG | Dialog (Modal) |
| yet-another-react-lightbox | Lightbox |
| MUI | Dialog (full-screen image) |
Related concepts
A dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAlternativeA horizontally scrolling track of items where one slide takes focus at a time and the rest slide out or peek at the edge as a hint. Switching uses dots, arrows or autoplay — common in hero banners, image galleries and recommendation rails. Fits "browse one item after another" content, not information that must be compared side by side.
ComponentsUsed withA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsSimilarNot to be confused with
Modal hosts generic tasks and copy; lightbox exists to view media enlarged
Carousel rotates in-page; lightbox presents full-screen over a dimmed page