Dialog，也叫 “modal”，表現為帶遮罩的彈框。可以分為 Alert 和 Confirm 兩種。
#### [](https://github.com/weui/weui/wiki/Dialog#alert)Alert
alert，警告彈框，功能類似于瀏覽器自帶的 alert 彈框，用于提醒、警告用戶簡單扼要的信息，只有一個“確認”按鈕，點擊“確認”按鈕后關閉彈框。
示例代碼如下：
~~~
<div style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">彈窗標題</strong></div>
<div class="weui-dialog__bd">彈窗內容，告知當前頁面信息等</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">確定</a>
</div>
</div>
</div>
~~~
預覽效果如下：
#### [](https://github.com/weui/weui/wiki/Dialog#confirm)Confirm
Confirm，確認彈框，功能類似于瀏覽器自帶的 confirm 和 prompt 的集合，可以用于讓用戶確認/取消確認，也可以讓用戶填寫表單。
示例代碼如下：
~~~
<div id="dialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">彈窗標題</strong></div>
<div class="weui-dialog__bd">彈窗內容，告知當前狀態、信息和解決方法，描述文字盡量控制在三行內</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">輔助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
~~~
預覽效果如下：
