Lightbox
A dialog with no chrome: the media floats on a heavily blurred backdrop.
Examples
Lightbox
Anatomy
dialog.lightbox | A native <dialog> with no fill, padding or shadow of its own. |
> img, > video | The media, a direct child, at most 85% of the viewport height, with a large shadow. |
> form[method=dialog] | Optional, for a close button. |
API
| Attribute | Values | Description |
|---|---|---|
data-light-dismiss | boolean | A click on the backdrop closes it (aequitas.js). Without it only Esc does. |
data-open | <selector> | On the thumbnail or button: aequitas.js calls showModal() on the lightbox. |
Behaviour
Opens and closes like Dialog. Paging between images is not included.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- The image needs real
alttext; it is the only content. - Label the dialog (
aria-label) so it is announced as more than "dialog". - Add a close button in a
<form method="dialog">for touch users, who have no Esc key.
| Key | Effect |
|---|---|
| Esc | Closes the lightbox (native, as a modal dialog). |