ImagesLesson 60Free preview

Lightbox

This lesson is part of How To · All levels

Summary

A lightbox is an overlay display for viewing images or media in large sizes, often with buttons prev, next, and caption. Unlike regular capital, lightboxes are usually the focus of full attention and support between items navigation. Keyboards and focus need to be managed to keep the experience accessible.

Key points

The lightbox uses a fixed overlay with a dark background and a high z-index.
The arrow button allows the image to be moved without closing the lightbox.
The Escape button and the background click became a common way to close.
Role="dialog" and aria-modal="true" explain the nature of dialogue to assistive technology.
Scroll pages should be locked while the lightbox is open.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.