Modal

一種浮動介面可用來增加使用者互動、內容擴增、提示、詢問等等自訂內容。使用類別名稱為 .modal 並且以此為子元件前綴詞。需要額外 Javascript 操作來做顯示切換，預設為不顯示，顯示切換的類別為 .is:on 加到 .modal 上。

預設樣式

Modal 整體結構在 .modal_container 之下，主要區分 Header, Body, Footer 三個容器，Body 用於放置 Modal 主要內容；Header 則是放置標題或輔助控制項；Footer 放置控制項或是額外資訊。

Confirm

讓 Modal 作為確認視窗，可將 .modal_foot 改為 .modal_btn-grp。

<div class="modal"> <div class="modal_container"> <header class="modal_head"> <h3 class="modal_title"></h3> </header> <main class="modal_body"> <div class="modal_content"></div> </main> <footer class="btn-grp :united sz:lg"> <button class="btn clr:dark">Cancel</button> <button class="btn clr:primary">Okay</button> </footer> </div> <div class="modal_mask"></div> </div>

全螢幕

在 .modal 追加 sz:full 就能以全螢幕方式顯示。

尺寸

除了全螢幕之外，另外提供 .sz:lg 與 .sz:sm 兩種不同尺寸可以使用。

Modal

預設樣式

Confirm

全螢幕

尺寸

Large

Small

範例