AMP教學-lightbox元件

AMP教學-lightbox元件
點擊按鈕後跳出視窗、勾選像項目後出現同意與否、或是點擊圖片後出現相簿效果等等,在AMP中要呈現這個動作可以使用lightbox元件。

AMP lightbox有三種

amp-lightbox 點擊按鈕後出現視窗,可自由編排視窗內要出現的畫面
amp-image-lightbox : 點選圖片後放大的lightbox
amp-lightbox-gallery點擊圖片之後可以出現圖片輪播、相簿使用

本篇要介紹的是第一種,由於警告視窗或是點擊按鈕跳出搜尋視窗等功能較常見,因此優先以此為主,基本上第一種學會後,另外兩種應該也能得心應手地運用囉

載入js檔案
首先同樣地先載入js檔案
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

視窗Html語法
接著在<body>後放入跳出視窗的語法,在註解內的區塊可以放文字、圖片、form、分享按鈕等等...
*使用form、分享按鈕時記得載入相關js

<amp-lightbox id="my-lightbox"
layout="nodisplay">
<div class="lightbox"
on="tap:my-lightbox.close"
role="button"
tabindex="0">
<!-- Content start -->
<h1>Hello World!</h1>
<!-- Content end -->
</div></amp-lightbox>
on="tap:my-lightbox.close"
上述的語法是指任點一處都可以關閉id為my-lightbox的視窗
假如不希望任點一處關閉的話,可以把該語法拿掉或是另做一顆按鈕放於註解內。

加入css
為了要讓跳出視窗後有半透明背景,css要加入下列語法
 .lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox h1 {
color: white;
}


按鈕Html語法
接著在畫面上做一顆按鈕
<button class="ampstart-btn caps m2"
on="tap:my-lightbox"
role="button"
tabindex="0">
Open lightbox
</button>
on="tap:my-lightbox"
代表點擊按鈕後開啟id="my-lightbox"視窗,放上後即完成!

範例
範例可以參考 官方範例
或者參考 變化案例

當瞭解原理後,另外兩種lightbox也可以自行嘗試看看喔!

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播