#### `dialog提示窗`
[預覽](https://aui-js.github.io/aui/pages/api/plugs/dialog.html) </br>
參數 | 類型 | 描述 | 默認值 | 必選
---- | ----- | ------ | ----- | ----
warp | string | 父容器元素 | 'body' | 否
title | string | 標題 | '' | 否
msg | string | 提示內容 | '' | 是
btns | arr | 按鈕,默認按鈕為“確定” 分別可設置btns值為</br>1:['按鈕1', '按鈕2']</br>2:[{name: '按鈕1', color: ''},{name: '按鈕2', color: ''}] | ["確定"] | 否
mask | boolean | 是否顯示遮罩蒙版 | true | 否
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否
theme | number | 主題樣式,控制模態彈窗按鈕顯示風格(1: 大按鈕; 2: 小按鈕-居右分布; 3: 按鈕寬度等于父級寬度100%,適用于按鈕文字過多情況) | 'col' | 否
items | arr | prompt--input框列表配置</br>[{label: '姓名:', type: 'text', value: '(可選)', placeholder: '請輸入姓名'}] | [] | 否
duration | number | 顯示時間 | 2000 | 否
style | object | {</br> w: '', //--可選參數,模態窗寬度,默認80%</br> h: '', //--可選參數,模態窗高度,默認"auto"自適應</br> bg: '',//--可選參數,模態窗背景色,默認白色</br> zIndex: '', //--可選參數,模態窗層級</br> title: {</br> bg: "",</br> color: "",</br> lineHeight: "",</br> textAlign: "",</br> fontSize: "",</br> padding: ""</br>}} | '' | 否
````html
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
````
> 1、alert單按鈕提醒彈窗
````javascript
aui.alert({
title: "提示", //可選
msg: "您點擊了alert單按鈕模態彈窗!",
mask: true,
touchClose: true, //可選
btns: ["確定"], //可選
//或btns: [{name: '按鈕1', color: '#f00'},{name: '按鈕2', color: '#00f'}], //可選
theme: 1, //可選
style: { //可選
w: "75%",
h: "auto",
bg: '#FFF',
zIndex: 999,
animate: "aui-scale-in-tosmall-dialog",
title: {
bg: "#FFF",
color: "#333",
lineHeight:"55px",
fontSize: "17px",
textAlign: "center",
padding: "0px"
}
}
},function(ret){
console.log(ret.index);
if(ret.index == 0){
aui.toast({msg: "您點擊了確定"});
}
});
````
> 2、confirm雙按鈕提醒彈窗
````javascript
aui.confirm({
msg: "您點擊了confirm雙按鈕模態彈窗!",
btns: ["取消", "確定"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({msg: "您點擊了確定"});
}
});
````
> 3、delete刪除提醒彈窗
````javascript
aui.delete({
msg: "您點擊了delete刪除模態彈窗!",
btns: ["取消", "刪除"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({msg: "您點擊了刪除"});
}
});
````
> 4、prompt輸入彈窗
````javascript
aui.prompt({
items: [{
label: '姓名:',
type: 'text',
value: '',
placeholder: '請輸入姓名'
},{
label: '年齡:',
type: 'number',
value: '',
placeholder: '請輸入年齡'
}],
btns: ["取消", "確定"],
},function(ret){
console.log(ret.data);
if(ret.index == 1)
{
aui.alert({
title: "輸入結果:",
msg: "<div style='text-align: left;'>姓名:" + ret.data[0] + "</br>年齡:" + ret.data[1]+"</div>",
btns: ["確定"],
}, function(ret){
if(ret.index == 0){
aui.toast({msg: "您點擊了確定"});
}
});
}
});
````
> 5、confirm帶圖標雙按鈕提醒彈窗
````javascript
aui.confirm({
msg: "<div style='text-align: center;'>"
+"<img src='../../img/success-green.png' style='width: 60px; margin: 0 auto;'>"
+"<p style='width: 100%; line-height: 25px; color: 15px;'>帶圖標模態彈窗</p>"
+"</div>",
btns: ["取消", "確定"],
},function(ret){
console.log(ret.index);
if(ret.index == 1){
aui.toast({msg: "您點擊了確定"});
}
});
````
> 6、多按鈕彈窗
````javascript
aui.confirm({
msg: "您點擊了多按鈕彈窗!",
btns: [{name: '殘忍拒絕', color: ''},{name: '再逛逛', color: ''}, {name: "返回首頁", color: "#909090"}], //可選
theme: 3, //可選
},function(ret){
console.log(ret.index);
if(ret.index == 0){
aui.toast({msg: "您點擊了殘忍拒絕"});
}
else if(ret.index == 1){
aui.toast({msg: "您點擊了再逛逛"});
}
else if(ret.index == 2){
aui.toast({msg: "您點擊了返回首頁"});
}
});
````