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 结合使用
amp-lightbox 可以通过将布尔值绑定到 open 属性，作为 amp-bind 计算的结果打开。 请注意，我们也在监听 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 上编辑示例-