一、开启dialog
$('#x').dialog();
$('#y').dialog();
二、修改dialog样式
- 在弹出的dialog 对话框中，在火狐浏览器中打开Firebug 或者右击->查看
元素。可以看看dialog 的样式，对dialog 的标题背景进行修改。
//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
三、dialog的方法属性
| 属性 |
默认值/类型 |
说明 |
| title |
无/字符串 |
对话框的标题，直接作用与DOM |
| buttons |
无/对象 |
以对象键值对方式，给dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数 |
$('#reg').dialog({
position : 'left top'
});
| 属性 |
默认值/类型 |
说明 |
| position |
center/字符串 |
设置一个对话框窗口的坐标位置，默认为center。其他设置值为：left top、top right、bottom left、right bottom（四个角）top、bottom（顶部或底部，宽度居中）、left 或right（左边或右边，高度居中）、center（默认值） |
$ ('#reg').dialog({
position : 'left top'
});
| 属性 |
默认值/类型 |
说明 |
| width |
300/数值 |
对话框的宽度。默认为300，单位是像素。 |
| height |
auto/数值 |
对话框的高度。默认为auto，单位是像素。 |
| minWidth |
150/数值 |
对话框的最小宽度。默认150，单位是像素。 |
| minHeight |
150/数值 |
对话框的最小高度。默认150，单位是像素。 |
| maxWidth |
auto/数值 |
对话框的最大宽度。默认auto，单位是像素。 |
| maxHeight |
auto/数值 |
对话框的最大高度。默认auto，单位是像素。 |
$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});
| 属性 |
默认值/类型 |
说明 |
| show |
false/布尔值 |
显示对话框时，默认采用淡入效果。 |
| hide |
false 布尔值 |
关闭对话框时，默认采用淡出效果。 |
$('#reg').dialog({
show : true,
hide : true
});
| 特效名称 |
说明 |
| blind |
对话框从顶部显示或消失 |
| bounce |
对话框断断续续地显示或消失，垂直运动 |
| clip |
对话框从中心垂直地显示或消失 |
| slide |
对话框从左边显示或消失 |
| drop |
对话框从左边显示或消失，有透明度变化 |
| fold |
对话框从左上角显示或消失 |
| highlight |
对话框显示或消失，伴随着透明度和背景色的变化 |
| puff |
对话框从中心开始缩放。显示时“收缩”，消失时“生长” |
| scale |
对话框从中心开始缩放。显示时“生长”，消失时“收缩” |
| pulsate |
对话框以闪烁形式显示或消失 |
| 属性 |
默认值/类型 |
说明 |
| autoOpen |
true/布尔值 |
默认为true，调用dialog()方法时就会打开对话框；如果为false，对话框不可见，但对话框已创建，可以通过dialog('open')才能可见。 |
| draggable |
true/布尔值 |
默认为true，可以移动对话框，false 无法移动。 |
| resizable |
true/布尔值 |
默认为true，可以调整对话框大小，false 无法调整 |
| modal |
false/布尔值 |
默认为false，对话框外可操作，true 对话框会遮罩一层灰纱，无法操作。 |
| closeText |
无/字符串 |
设置关闭按钮的title 文字 |
$('#reg').dialog({
autoOpen : false,
draggable : false,
resizable : false,
modal : true,
closeText : '关闭'
});
