mip-lightbox 彈層

mip-lightbox 是由使用者控制展現或關閉的全螢幕浮層元件，元件全螢幕覆蓋，元件裡的元素超出螢幕會被隱藏，無法滑動。

範例

<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0">
    Open lightbox
</button>

<mip-lightbox
    id="my-lightbox"
    layout="nodisplay"
    class="mip-hidden">
    <div class="lightbox">
        <h1>Hello, World!</h1>
        <p> this is the lightbox</p>
    </div>
</mip-lightbox>

屬性

#id

##說明：元件ID

必選項：是
類型：字串

layout

說明：佈局

必選項：是
類型：字串
取值：nodisplay

#注意事項

• mip-lightbox 預設是隱藏的，作為開啟開關的dom 節點需設定on 屬性，且on 屬性的屬性值為"tap:元件ID.open"。

• 作為關閉 lightbox 的 dom 節點需要設定 on 屬性，且 on 屬性值為"tap:元件ID.close"。

• 同時作為開啟關閉 lightbox 的 dom 節點需要設定 on 屬性，且 on 屬性值為"tap:元件ID.toggle"。

• mip-lightbox 需要一個 div 子節點，這個 div 的 calss 必須有 lightbox。