Trip photos
Click a photo — it opens big over the dimmed page
The big image over the darkened page is the lightbox; the dark layer 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.
If you called it…
…you meant a lightbox.
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 |