amp-lightbox
简介
amp-lightbox 组件允许实现“灯箱”或类似体验 - 当用户交互时，组件会展开以填充视口，直到用户再次将其关闭。
设置
在头部导入 amp-lightbox 组件
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
您可以将灯箱组件与 amp-bind 结合使用。
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
基本用法
amp-lightbox 组件定义将在全视口覆盖层中显示的子元素。要通过单击或点击关闭灯箱，请在灯箱内的一个或多个元素上使用 on 属性。在此示例中，用户可以单击灯箱中的任意位置来关闭它。
当用户点击或单击带有 on 属性的元素时，灯箱会显示，该属性以 amp-lightbox 元素的 ID 为目标。
你好，世界！
<amp-lightbox id="my-lightbox" layout="nodisplay">
<div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:my-lightbox">
Open lightbox
</button>
为了在灯箱中显示图像，AMP 还提供了 amp-image-lightbox 组件，该组件不需要指定两次图像。
与 amp-bind 结合使用
通过将布尔值绑定到 open 属性，可以作为 amp-bind 求值的结果打开 amp-lightbox。请注意，我们还在监听 lightboxClose 事件以重置变量的状态。
你好，世界！
<amp-lightbox id="my-bindable-lightbox" [open]="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
<div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">
Open lightbox
</button>
需要进一步解释吗？
如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。
转到 Stack Overflow 未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例-