一、開啟dialog
$('#x').dialog();
$('#y').dialog();
二、修改dialog樣式
- 在彈出的dialog 對話框中，在火狐瀏覽器中打開Firebug 或者右擊->查看
元素。可以看看dialog 的樣式，對dialog 的標(biāo)題背景進(jìn)行修改。
//無須修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
三、dialog的方法屬性
| 屬性 |
默認(rèn)值/類型 |
說明 |
| title |
無/字符串 |
對話框的標(biāo)題，直接作用與DOM |
| buttons |
無/對象 |
以對象鍵值對方式，給dialog 添加按鈕。鍵是按鈕的名稱，值是用戶點(diǎn)擊后調(diào)用的回調(diào)函數(shù) |
$('#reg').dialog({
position : 'left top'
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| position |
center/字符串 |
設(shè)置一個對話框窗口的坐標(biāo)位置，默認(rèn)為center。其他設(shè)置值為：left top、top right、bottom left、right bottom（四個角）top、bottom（頂部或底部，寬度居中）、left 或right（左邊或右邊，高度居中）、center（默認(rèn)值） |
$ ('#reg').dialog({
position : 'left top'
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| width |
300/數(shù)值 |
對話框的寬度。默認(rèn)為300，單位是像素。 |
| height |
auto/數(shù)值 |
對話框的高度。默認(rèn)為auto，單位是像素。 |
| minWidth |
150/數(shù)值 |
對話框的最小寬度。默認(rèn)150，單位是像素。 |
| minHeight |
150/數(shù)值 |
對話框的最小高度。默認(rèn)150，單位是像素。 |
| maxWidth |
auto/數(shù)值 |
對話框的最大寬度。默認(rèn)auto，單位是像素。 |
| maxHeight |
auto/數(shù)值 |
對話框的最大高度。默認(rèn)auto，單位是像素。 |
$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| show |
false/布爾值 |
顯示對話框時，默認(rèn)采用淡入效果。 |
| hide |
false 布爾值 |
關(guān)閉對話框時，默認(rèn)采用淡出效果。 |
$('#reg').dialog({
show : true,
hide : true
});
| 特效名稱 |
說明 |
| blind |
對話框從頂部顯示或消失 |
| bounce |
對話框斷斷續(xù)續(xù)地顯示或消失，垂直運(yùn)動 |
| clip |
對話框從中心垂直地顯示或消失 |
| slide |
對話框從左邊顯示或消失 |
| drop |
對話框從左邊顯示或消失，有透明度變化 |
| fold |
對話框從左上角顯示或消失 |
| highlight |
對話框顯示或消失，伴隨著透明度和背景色的變化 |
| puff |
對話框從中心開始縮放。顯示時“收縮”，消失時“生長” |
| scale |
對話框從中心開始縮放。顯示時“生長”，消失時“收縮” |
| pulsate |
對話框以閃爍形式顯示或消失 |
| 屬性 |
默認(rèn)值/類型 |
說明 |
| autoOpen |
true/布爾值 |
默認(rèn)為true，調(diào)用dialog()方法時就會打開對話框；如果為false，對話框不可見，但對話框已創(chuàng)建，可以通過dialog('open')才能可見。 |
| draggable |
true/布爾值 |
默認(rèn)為true，可以移動對話框，false 無法移動。 |
| resizable |
true/布爾值 |
默認(rèn)為true，可以調(diào)整對話框大小，false 無法調(diào)整 |
| modal |
false/布爾值 |
默認(rèn)為false，對話框外可操作，true 對話框會遮罩一層灰紗，無法操作。 |
| closeText |
無/字符串 |
設(shè)置關(guān)閉按鈕的title 文字 |
$('#reg').dialog({
autoOpen : false,
draggable : false,
resizable : false,
modal : true,
closeText : '關(guān)閉'
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
