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