对话框（dialog），是 jQuery UI 非常重要的一个功能。它彻底的代替了 JavaScript 的 alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余
一．开启多个 dialog 我们可以同时打开多个 dialog，只要设置不同的 id 即可实现。
$(‘#reg‘).dialog(); $(‘#login‘).dialog();
二．修改 dialog 样式
在弹出的 dialog 对话框中，在火狐浏览器中打开 Firebug 或者右击->查看元素。这样， 我们可以看看 dialog 的样式，根据样式进行修改。我们为了和网站主题符合，对 dialog 的标 题背景进行修改。
//无须修改 ui 里的 CSS，直接用 style.css 替代掉
.ui-widget-header{
background:url(../img/ui_header_bg.png);
}
注意：其他修改方案类似。
三．dialog()方法的属性
对话框方法有两种形式：
1.dialog(options)，options 是以对象键值对的形式传参，每个 键值对表示一个选项；
2.dialog(‘action‘,param)，action 是操作对话框方法的字符串，param 则是 options 的某个选项。
$(‘#reg‘).dialog({
title:‘注册知问‘,
buttons:{
‘按钮‘: function(){
}
}
});
$(‘#reg‘).dialog({
position:‘lefttop‘
});
$(‘#reg‘).dialog({
height: 500,
width:500,
minWidth:300,
minHeight :300,
maxWidth: 800,
maxHeight: 600
});
$(‘#reg‘).dialog({
show:true,
hide:true
});
注意：设置 true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字 符串参数
$(‘#reg‘).dialog({
show:‘blind‘,
hide:‘blind‘
});
$(‘#reg‘).dialog({
autoOpen:false,
draggable:false,
resizable: false,
modal: true,
closeText:‘关闭‘
});
四．dialog()方法的事件
除了属性设置外，dialog()方法也提供了大量的事件。这些事件可以给各种不同状态时 提供回调函数。这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div。
//当对话框获得焦点后
$(‘#reg‘).dialog({
focus:function(e,ui) {
alert(‘获得焦点‘);
}
});
//当创建对话框时
$(‘#reg‘).dialog({
create: function(e,ui){
alert(‘创建对话框‘);
}
});
//当将要关闭时
$(‘#reg‘).dialog({
beforeClose:function(e,ui){
alert(‘关闭前做的事！‘);
returnflag;
}
});
//关闭对话框时
$(‘#reg‘).dialog({
close:function(e,ui){
alert(‘关闭！‘);
}
});
//对话框移动时
$(‘#reg‘).dialog({
drag:function(e,ui){
alert(‘top:‘+ui.position.top+ ‘\n‘ +‘left:‘+ ui.position.left);
}
});
//对话框开始移动时
$(‘#reg‘).dialog({
dragStart: function(e,ui){
alert(‘top:‘+ui.position.top+ ‘\n‘ +‘left:‘+ ui.position.left);
}
});
//对话框结束移动时
$(‘#reg‘).dialog({
dragStop: function(e,ui){
alert(‘top:‘+ui.position.top+ ‘\n‘ +‘left:‘+ ui.position.left);
}
});
//调整对话框大小时
$(‘#reg‘).dialog({
resize:function(e,ui){
alert(‘size:‘+ui.size.width+ ‘\n‘
+‘originalSize:‘ +ui.originalSize.width);
}
});
//开始调整对话框大小时
$(‘#reg‘).dialog({
resizeStart :function(e,ui){
alert(‘size:‘+ui.size.width+ ‘\n‘ +‘originalSize:‘ +ui.originalSize.width);
}
});
//结束调整对话框大小时
$(‘#reg‘).dialog({
resizeStop:function(e,ui) {
alert(‘size:‘+ui.size.width+ ‘\n‘ +‘originalSize:‘ +ui.originalSize.width);
}
});
//初始隐藏对话框
$(‘#reg‘).dialog({
autoOpen:false
});
//打开对话框
$(‘#reg_a‘).click(function(){
$(‘#reg‘).dialog(‘open‘);
});
//关闭对话框
$(‘#reg‘).click(function(){
$(‘#reg‘).dialog(‘close‘);
});
//判断对话框打开或关闭状态
$(document).click(function() {
alert($(‘#reg‘).dialog(‘isOpen‘));
});
//将指定对话框置前
$(document).click(function() {
$(‘#reg‘).dialog(‘moveToTop‘);
});
//获取某个 options 的 param 选项的值
vartitle=$(‘#reg‘).dialog(‘option‘, ‘title‘);
alert(title);
//设置某个 options 的 param 选项的值
$(‘#reg‘).dialog(‘option‘,‘title‘, ‘注册知问‘);
五．dialog 中使用 on()
在 dialog 的事件中，提供了使用 on()方法处理的事件方法。
$(‘#reg‘).on(‘dialogclose‘,function(){
alert(‘关闭‘);
});
20151215jquery学习笔记--jqueryUI --dialog（对话框）
原文：http://www.cnblogs.com/xiaoduc-org/p/5049828.html