A practical walkthrough of building a lightweight image lightbox using the native HTML dialog element instead of a third-party library. The implementation uses ~40 lines of JavaScript to dynamically wrap page images in buttons that open a modal dialog, leveraging the browser's top-layer rendering to avoid z-index issues. The guide covers DOM manipulation, accessibility considerations (aria-haspopup, screen reader-friendly close buttons), CSS grid layout for the dialog internals, click-outside-to-close via backdrop detection, scroll prevention using :root:has() with overflow:clip, and fade-in animation respecting prefers-reduced-motion. Future improvements include wrapping the logic in a web component and using the View Transitions API for zoom effects.
