“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”「一种放大图片的界面模式」
Trip photos
Dunes
标本可交互，可以直接操作。
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.
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 · 灯箱（Lightbox）
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/lightbox/
**The click-to-enlarge image overlay that dims the page behind it**
点图放大、背后页面变暗的图片浮层
**Also called / 也叫:** image viewer overlay, photo modal, gallery overlay / 图片查看浮层、照片模态框、相册浮层
## Prompt / 提示词
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 / 调试提示词
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 / 代码里叫什么
- **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 库
