“Lightbox” effects have been an established UI pattern for a decade, but the vast majority of implementations have been framework-dependent. In previous articles I’ve shown how to create a Lightbox UI using only CSS, although that version lacked controls. By adding the <dialog> element and a dozen lines of vanilla JavaScript, we can recreate a traditional lightbox perfectly:

The linked images follow the pattern used in my previous “Accessible Image Gallery with Progressive JavaScript” article; the large image inside the <dialog> element is a placeholder that we’ll change later using JavaScript. (alt values have been left blank for the sake of brevity).

The animations will fade in the <dialog> element; the <nav> links are displayed using flexbox to divide them evenly across the page. When visible, the <dialog> element is positioned using a variation on one of the established methods of centering elements when the height of the parent (the <body>, in this case) is unknown. (Vendor prefixes have been dropped for the purpose of clarity).

The JavaScript

The script goes at the end of the document; other browsers will require an additional polyfill to support the <dialog> element.

The script attaches a function to each of the links; when the user clicks on one, it sets the src attribute of the large image in the <dialog> element to the value of the link and shows the modal window; the elements animate due to the CSS we applied earlier. Clicking on the altered <button> element closes the modal. Because the thumbnail images are links, they are also progressive and accessible.

Conclusion & Improvements

There are a few things that could be better; obviously, being able to drop the polyfill once all browsers support the <dialog> element would be good, and the element itself could be animated like the version in my CSS-only example. Centering the element perfectly across different platforms could also be improved: right now, things move around a little more than I would like. I’ll leave that and further enhancements for a future article.