amp-lightbox
簡介
amp-lightbox 元件提供「lightbox」或類似的體驗 - 在使用者互動時，元件會展開以填滿視窗，直到使用者再次關閉。
設定
在標頭中匯入 amp-lightbox 元件
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
您可以將 lightbox 元件與 amp-bind 結合使用。
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
基本用法
amp-lightbox 元件定義了將在全視窗覆蓋中顯示的子元素。若要透過點擊或輕觸關閉 lightbox，請在 lightbox 內的一個或多個元素上使用 on 屬性。在本範例中，使用者可以點擊 lightbox 中的任何位置來關閉它。
當使用者輕觸或點擊具有 on 屬性的元素，且該屬性指向 amp-lightbox 元素的 ID 時，lightbox 會顯示。
你好，世界！
<amp-lightbox id="my-lightbox" layout="nodisplay">
<div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:my-lightbox">
Open lightbox
</button>
為了在 lightbox 中顯示圖片，AMP 也提供了 amp-image-lightbox 元件，此元件不需要重複指定圖片。
與 amp-bind 結合使用
amp-lightbox 可以透過將布林值繫結到 `open` 屬性，作為 `amp-bind` 評估的結果開啟。請注意，我們也正在監聽 `lightboxClose` 事件以重設變數的狀態。
你好，世界！
<amp-lightbox id="my-bindable-lightbox" [open]="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
<div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">
Open lightbox
</button>
需要更多說明嗎？
如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題做出一次性貢獻。
在 GitHub 上編輯範例-