amp-lightbox
Description
Displays elements in a full-viewport “lightbox” modal.
Required Scripts
<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">
Supported Layouts
Usage
The 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 amp-lightbox
.
For showing images in a lightbox, there's also the
<amp-image-lightbox>
component. To show a gallery of images in a lightbox, you can use
<amp-lightbox-gallery>
.
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 amp-lightbox
, see bento-lightbox
.
Attributes
id
A unique identifier for the lightbox.
layout
(required)
Must be set to nodisplay
.
animation
Defines the style of animation for opening the lightbox. By default, this will
be set to fade-in
. Valid values are fade-in
, fly-in-bottom
, and
fly-in-top
.
This attribute can be configured to use different options based on a media query.
scrollable
When the scrollable
attribute is present, the content of the lightbox can
scroll when overflowing the height of the lightbox.
Actions
open
(default)
Opens the lightbox.
close
Closes the lightbox.
Styling
You can style the amp-lightbox
with standard CSS.
Accessibility
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 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 data-close-button-aria-label
attribute value, will be created and focused on.
<button on="tap:quote-lb">See Quote</button> <amp-lightbox id="quote-lb" layout="nodisplay"> <blockquote> "Don't talk to me about JavaScript fatigue" - Horse JS </blockquote> <button on="tap:quote-lb.close">Nice!</button> </amp-lightbox>
Version notes
The experimental 1.0
version of amp-lightbox
employs the following differences from version 0.1
:
- This component does not currently support modifying browser history state.
data-close-button-aria-label
is not supported and will soon be replaced with support forslot="close-button"
.animate-in
has been renamed toanimation
.
이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.
Stack Overflow로 이동 버그나 누락된 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기