Modal

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


預設樣式

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

<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="modal_foot"></footer> </div> <div class="modal_mask"></div> </div>

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="modal_btn-grp"> <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 就能以全螢幕方式顯示。

<div class="modal sz:full"></siv>

尺寸

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


<div class="modal sz:lg"></siv> <div class="modal sz:sm"></siv>

範例