amp-lightbox

1.0 0.1

<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">

用法

amp-lightbox 组件定义在全视口覆盖/模态中显示的子元素。当用户点击或单击元素（例如按钮）时，在被点击元素的 on 属性中引用的 amp-lightbox ID 触发灯箱占据整个视口并显示 amp-lightbox 的子元素。

在有效的 AMP 文档之外独立使用

Bento 允许你在非 AMP 页面中使用 AMP 组件，而无需完全提交到有效的 AMP。你可以采用这些组件，并将它们放置在不支持 AMP 的框架和 CMS 中的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多信息。

要查找 amp-lightbox 的独立版本，请参阅 bento-lightbox。

属性

id

灯箱的唯一标识符。

layout（必需）

必须设置为 nodisplay。

animation

定义打开灯箱的动画样式。默认情况下，这将设置为 fade-in。有效值包括 fade-in、fly-in-bottom 和 fly-in-top。

可以配置此属性以根据 媒体查询 使用不同的选项。

scrollable

当 scrollable 属性存在时，灯箱的内容可以在超出灯箱高度时滚动。

操作

open（默认）

打开灯箱。

close

关闭灯箱。

样式

你可以使用标准 CSS 为 amp-lightbox 设置样式。

无障碍

按下键盘上的 ESC 键或将焦点设置在灯箱外部的元素上会关闭灯箱。或者，在灯箱内一个或多个元素上设置 on 属性，并将其方法设置为 close，当点击或单击元素时关闭灯箱。关闭后，焦点将返回到触发元素。

出于辅助功能原因，如果用户在打开时未在灯箱中提供焦点（使用 autofocus 属性或在打开时强制焦点），则焦点将设置在使用 on:tap 的第一个元素上。否则，将创建仅对屏幕阅读器可见的关闭按钮（可选，使用 data-close-button-aria-label 属性值），并对其进行聚焦。

<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>

版本说明

1.0 版本的实验性 amp-lightbox 采用了与 0.1 版本不同的以下内容

• 此组件当前不支持修改浏览器历史记录状态。
• 不支持 data-close-button-aria-label，它将很快被对 slot="close-button" 的支持所取代。
• animate-in 已重命名为 animation。