Trip photos
3 photos · click one to enlarge
The image floating over the darkened page is a lightbox — the dark layer under it is the scrim
Lightbox
/ <dialog> · ::backdrop /
also called image viewer overlay, photo modal, gallery overlay
“Click the picture and it opens big with everything dark behind it” is a lightbox: a modal image viewer layered over the page. The dark layer behind it is the scrim, the enlarged image sits center stage, and arrows page through the gallery. Modern lightboxes are built on the native <dialog> element and its ::backdrop.
Prompt — paste into your agent
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
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
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:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <dialog> | the modern base layer for a lightbox |
| CSS | ::backdrop | |
| ARIA | role="dialog" aria-modal="true" | |
| JS libs | PhotoSwipe · GLightbox | ready-made lightbox libraries |