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。