amp-lightbox

您现在可以使用此组件在有效的 AMP 文档之外，方法是使用此组件的 Bento 版本。在 Bento 指南中了解更多信息。

描述

在全视口“灯箱”模式下显示元素。

必需脚本

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

支持的布局

nodisplay

示例

灯箱广告

用法

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

要以灯箱显示图像，还有 <amp-image-lightbox> 组件。要在灯箱中显示图像库，可以使用 <amp-lightbox-gallery>。

在 AMPHTML 广告中使用 `amp-lightbox`

在普通 AMP 文档中使用 amp-lightbox 与在 AMPHTML 中编写的广告之间存在一些差异。

用于 AMPHTML 广告的 amp-lightbox 组件是实验性的，并且正在积极开发中。要在 AMPHTML 广告中使用 amp-lightbox，请启用 amp-lightbox-a4a-proto 实验。

必需的 `close-button`

对于 AMPHTML 广告，需要 close-button 属性。此属性会导致在灯箱顶部呈现标题。标题包含一个关闭按钮和一个显示“广告”的标签。需要此标题才能

为 AMPHTML 广告设置一致且可预测的用户体验。
确保灯箱始终存在一个退出点，否则创意可能会通过灯箱有效地劫持宿主文档内容。

close-button 属性是必需的，并且仅允许在 AMPHTML 广告中使用。在常规 AMP 文档中，您可以将关闭按钮渲染为您需要的 <amp-lightbox> 内容的一部分。

不允许使用可滚动灯箱

对于 AMPHTML 广告，不允许使用可滚动灯箱。

透明背景

当您在 AMPHTML 广告中使用 <amp-lightbox> 时，您的 <body> 元素的背景将变为透明，因为 AMP 运行时会在灯箱展开之前调整创意内容的大小并重新对齐。这样做是为了防止灯箱打开时出现创意的视觉“跳跃”。如果您的创意需要背景，请在中间容器（如全尺寸 <div>）而不是 <body> 上设置。

当 AMPHTML 广告在第三方环境（例如，在非 AMP 文档中）中运行时，创意会相对于视口居中，然后展开。这是因为第三方 iframe 需要依赖 postMessage API 来启用帧调整大小等功能，该功能是异步的，因此先将创意居中可以实现平滑的过渡，而不会出现视觉跳跃。

AMPHTML 广告中灯箱的过渡效果示例

在下面的示例中，我们演示了当为友好的 iframe 中的 AMPHTML 广告和第三方 iframe 中的 AMPHTML 广告在灯箱元素上设置 animate-in="fly-in-bottom" 属性时，过渡效果如何显示。

在友好的 iframe 中（例如，来自 AMP 缓存）

在第三方 iframe 中（例如，在 AMP 缓存之外）

属性

`id`

灯箱的唯一标识符。

`layout`

必须设置为 nodisplay。

`close-button`

在灯箱顶部呈现一个关闭按钮标题。此属性是使用 AMPHTML 广告所必需的。它在其他 AMP 格式上无效。

`animate-in` (可选)

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

fly-in-top 和 fly-in-bottom 动画预设会修改 amp-lightbox 元素的 transform 属性。不要依赖于直接变换 amp-lightbox 元素。如果您需要应用变换，请将其设置在嵌套元素上。

操作

`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 规则。

需要更多帮助？

您已阅读此文档十几次，但它并没有真正涵盖您所有的问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题提供一次性贡献。

转到 GitHub

amp-lightbox 1.0 0.1

描述