Displays elements in a full-viewport “lightbox” modal.
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
amp-lightbox component defines child elements that display in a full-viewport overlay/modal. When the user taps or clicks an element (e.g., a button), the
amp-lightbox ID referenced in the clicked element's
on attribute triggers the lightbox to take up the full viewport and displays the child elements of the
Pressing the escape key on the keyboard or setting focus on an element outside the lightbox closes the lightbox. Alternatively, setting the
on attribute on one or more elements within the lightbox and setting its method to
close closes the lightbox when the element is tapped or clicked. Once closed, the focus will be sent back to the trigger element.
For accessibility reasons, if the user does not provide a focus in the lighbox on open (using
autofocus attribute or forcing focus on open), the focus will be set on the first element using
on:tap. Otherwise, a close button only visible to screen readers, optionnaly using
data-close-button-aria-label attribute value, will be created and focused on.
Defines the style of animation for opening the lightbox. By default, this will
be set to
fade-in. Valid values are
fly-in-bottomanimation presets modify the
transformproperty of the
amp-lightboxelement. Do not rely on transforming the
amp-lightboxelement directly. If you need to apply a transform, set it on a nested element instead.
A unique identifer for the lightbox.
Must be set to
Optional attribute used to set ARIA label for the autogenerated close button added for accessibility. By default the applied label is "Close the modal".
scrollable attribute is present, the content of the lightbox can scroll when overflowing the height of the lightbox.
You can style the
amp-lightbox with standard CSS.
amp-lightbox exposes the following actions you can use AMP on-syntax to trigger:
| ||Opens the lightbox.|
| ||Closes the lightbox.|
See amp-lightbox rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack Overflow Found a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub