Displays elements in a full-viewport “lightbox” modal.
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-lightbox-1.0.css">
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
amp-lightbox ID referenced in the clicked element's
attribute triggers the lightbox to take up the full viewport and displays the
child elements of the
For showing images in a lightbox, there's also the
component. To show a gallery of images in a lightbox, you can use
Standalone use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of
A unique identifier for the lightbox.
Must be set to
Defines the style of animation for opening the lightbox. By default, this will
be set to
fade-in. Valid values are
This attribute can be configured to use different options based on a media query.
scrollable attribute is present, the content of the lightbox can
scroll when overflowing the height of the lightbox.
Opens the lightbox.
Closes the lightbox.
You can style the
amp-lightbox with standard CSS.
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
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 lightbox
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, optionally using
attribute value, will be created and focused on.
1.0 version of
amp-lightbox employs the following differences from version
- This component does not currently support modifying browser history state.
data-close-button-aria-labelis not supported and will soon be replaced with support for
animate-inhas been renamed to
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