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

說明