Modals

Modals 是一種彈跳視窗的組件,它會蓋滿整個畫面。所有 Modals 相關元件將會以 .modal- 為開頭。

預設樣式

使用方式與 Cards 相似,先建立一個 .modal.modal-box,並且將內容統一放置 .model-box

<div class="modal">
    <div class="modal-box">
        <p>~略~</p>
    </div>
</div>
<div class="modal-overlay"></div>

Header 與 Footer

一樣有 .modal-header.modal-footer

<div class="modal">
    <div class="modal-header">
        <h3 class="modal-title">Modal Title</h3>
        <a class="close">×</a>
    </div>
    <div class="modal-box">
        <p>~略~</p>
    </div>
    <div class="modal-footer">
        <a class="btn color-primary">OK</a>
        <a class="btn">Cancel</a>
    </div>
</div>
<div class="modal-overlay"></div>

Confirm

可以利用 Modals 建立一個 Confirm 視窗。

<div class="modal">
    <div class="modal-box">
        <p>~略~</p>
    </div>
    <div class="modal-btns size-lg">
        <a class="btn btn-flat color-primary">OK</a>
        <a class="btn btn-flat color-common">Cancel</a>
    </div>
</div>
<div class="modal-overlay"></div>