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 上编辑示例-