Jquery UI 弹出框之dialog

一、开启dialog

 $('#x').dialog(); 
 $('#y').dialog();

二、修改dialog样式

• 在弹出的dialog 对话框中，在火狐浏览器中打开Firebug 或者右击->查看
  元素。可以看看dialog 的样式，对dialog 的标题背景进行修改。

//无须修改ui 里的CSS，直接用style.css 替代掉 
.ui-widget-header { 
 background:url(../img/xxx.png); 
} 

三、dialog的方法属性

• 对话框方法有两种形式：1.dialog(options)，options 是以对象键值对的形式
  传参，每个键值对表示一个选项；2.dialog('action', param)，action 是操作对
  话框方法的字符串，param则是options 的某个选项。

• dialog 外观选项

属性	默认值/类型	说明
title	无/字符串	对话框的标题，直接作用与DOM
buttons	无/对象	以对象键值对方式，给dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

$('#reg').dialog({ 
position : 'left top'
}); 

• dialog定位

属性	默认值/类型	说明
position	center/字符串	设置一个对话框窗口的坐标位置，默认为center。其他设置值为：left top、top right、bottom left、right bottom（四个角）top、bottom（顶部或底部，宽度居中）、left 或right（左边或右边，高度居中）、center（默认值）

$ ('#reg').dialog({ 
position : 'left top'
}); 

• dialog大小

属性	默认值/类型	说明
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 
}); 

• dialog视觉特效

属性	默认值/类型	说明
show	false/布尔值	显示对话框时，默认采用淡入效果。
hide	false 布尔值	关闭对话框时，默认采用淡出效果。

$('#reg').dialog({ 
  show : true, 
  hide : true  
}); 

• show和hide特效选择

特效名称	说明
blind	对话框从顶部显示或消失
bounce	对话框断断续续地显示或消失，垂直运动
clip	对话框从中心垂直地显示或消失
slide	对话框从左边显示或消失
drop	对话框从左边显示或消失，有透明度变化
fold	对话框从左上角显示或消失
highlight	对话框显示或消失，伴随着透明度和背景色的变化
puff	对话框从中心开始缩放。显示时“收缩”，消失时“生长”
scale	对话框从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate	对话框以闪烁形式显示或消失

• dialog行为选择

属性	默认值/类型	说明
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 : '关闭'
});

• dialog事件见下一篇