amp-lightbox

1.0 0.1

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

用法

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

属性

id

灯箱的唯一标识符。

layout

必须设置为 nodisplay。

animate-in (可选)

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

操作

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>

验证

请参阅 AMP 验证器规范中的 amp-lightbox 规则。