Lightbox new 灯箱（Lightbox） web

The click-to-enlarge image overlay that dims the page behind it

点图放大、背后页面变暗的图片浮层

also called也叫: image viewer overlay, photo modal, gallery overlay图片查看浮层、照片模态框、相册浮层
If you called it…如果你管它叫……: “when you click a photo and it opens big with a dark background”「点一下照片就放大打开，背景变暗」
“the enlarged image popup in a gallery”「相册里那个放大图片的弹窗」
“click the thumbnail and it zooms over the page”「点缩略图，它就放大盖在页面上」
“the image viewer with arrows for the next photo”「带箭头可以翻下一张的图片查看器」
“the big photo over a black background”「黑背景上那张大照片」
“a pattern for enlarging pictures”「一种放大图片的界面模式」

标本可交互 —— 点点看。Specimen is live — try it.

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Build a lightbox: clicking a gallery thumbnail opens the full image in a modal <dialog> (aria-modal) over a dark ::backdrop scrim, with prev/next arrows, a close button, Escape and backdrop-click to dismiss, and a reversible fade/scale transition.

构建一个 lightbox：点击相册缩略图，在深色 ::backdrop 遮罩上以模态 <dialog>（aria-modal）打开大图，带上一张/下一张箭头、关闭按钮，Escape 和点击背景可关闭，并配可逆的淡入淡出/缩放过渡。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my lightbox (<dialog>, ::backdrop, PhotoSwipe-style image overlay). Rule out: opened with show() instead of showModal() so there is no backdrop and the page scrolls behind; arrow keys paging the gallery and scrolling the page at the same time; the full-size image loading only after the transition so it pops from blurry to sharp; focus not returning to the clicked thumbnail on close. The symptom:

调试我的 lightbox（<dialog>、::backdrop、PhotoSwipe 风格的图片浮层）。逐项排除：用了 show() 而不是 showModal()，结果没有遮罩、背后页面还能滚；方向键一边翻相册一边滚页面；大图在过渡结束后才加载完，从模糊突然变清晰；关闭后焦点没回到被点的缩略图。症状是：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
HTML	<dialog>	the modern base layer for a lightbox现代 lightbox 的地基
CSS	::backdrop
ARIA	role="dialog" aria-modal="true"
JS libs	PhotoSwipe · GLightbox	ready-made lightbox libraries现成的 lightbox 库

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条