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 AMP 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.
Example
The example below demonstrates amp-lightbox
component in standalone use.
<head> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-lightbox-1.0.css"> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script> </head> <amp-lightbox id="my-lightbox"> Lightboxed content <button id='close-button'>Close lightbox</button> </amp-lightbox> <button id='open-button'>Open lightbox</button> <script> (async () => { const lightbox = document.querySelector('#my-lightbox'); await customElements.whenDefined('amp-lightbox'); const api = await lightbox.getApi(); // set up button actions document.querySelector('#open-button').onclick = () => api.open(); document.querySelector('#close-button').onclick = () => api.close(); })(); </script>
Interactivity and API usage
Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and amp-bind
.
The amp-lightbox
component API is accessible by including the following script tag in your document:
await customElements.whenDefined('amp-lightbox'); const api = await lightbox.getApi();
Actions
The amp-lightbox
API allows you to perform the following actions:
open() Opens the lightbox.
api.open();
close() Closes the lightbox.
api.close();
Events
The amp-lightbox
API allows you to register and respond to the following events:
open
This event is triggered when the lightbox is opened.
lightbox.addEventListener('open', (e) => console.log(e))
close
This event is triggered when the lightbox is closed.
lightbox.addEventListener('close', (e) => console.log(e))
Layout and style
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-lightbox-1.0.css">
Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
Attributes
id
A unique identifier for the lightbox.
layout
Must be set to nodisplay
.
animation
(optional)
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
.
The fly-in-top
and fly-in-bottom
animation presets modify the transform
property of the amp-lightbox
element. Do not rely on transforming the
amp-lightbox
element directly. If you need to apply a transform, set it on a
nested element instead.
scrollable
(optional)
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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub にアクセスする