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

燈箱的專屬 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 驗證器規格中的 <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-lightbox/0.1/../validator-amp-lightbox.protoascii">amp-lightbox 規則</a>。