jQuery UI Dialog 创建友好的弹出对话框实现代码

主要参数
jQuery UI Dialog常用的参数有：

1、autoOpen：默认true，即dialog方法创建就显示对话框
2、buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:
{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住
4、title：标题
5、draggable：是否可手动，默认true
6、resizable：是否可调整大小，默认true
7、width：宽度，默认300
8、height：高度，默认"auto"
其他一些不太常用的参数：

1、closeOnEscape：默认true，按esc键关闭对话框
2、show：打开对话框的动画效果
3、hide：关闭对话框的动画效果
4、position：对话框显示的位置，默认"center"，可以设置成字符串或数组：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通过上面的几个字符串组合(x,y)
[350,100]，绝对的数值(x,y)
5、minWidth：默认150，最小宽度
6、minHeight：默认150，最小高度
使用方法：

$("...").dialog({ 
title: "标题", 
//...更多参数 
}); 

主要方法
jQuery UI Dialog提供了一些方法来控制对话框，仅列出常用的：

open：打开对话框
close：关闭对话框（通过close不会销毁，还能继续使用）
destroy：销毁对话框
option：设置参数，即前面列出的参数
使用的时候作为dialog方法的参数：

var dlg = $("...").dialog({ 
//...各种参数 
}); 
dlg.dialog("option", { title: "标题" }); // 设置参数 
dlg.dialog("open"); // 使用open方法打开对话框 

主要事件
jQuery UI Dialog提供了一些事件，比如打开、关闭对话框的时候做一些额外的事情：

open：打开时
close：关闭时
create：创建时
resize：调整大小时
drag：拖动时
使用方法同参数的使用方法，比如在打开时隐藏关闭按钮：

$("...").dialog({ 
//...各种参数 
open: function(event, ui) { 
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); 
} 
}); 

具体使用
以下封装了一些常用的提示信息，不再详细解释：

jQuery.extend(jQuery, { 
// jQuery UI alert弹出提示 
jqalert: function(text, title, fn) { 
var html = 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
} 
} 
}); 
}, 
// jQuery UI alert弹出提示,一定间隔之后自动关闭 
jqtimeralert: function(text, title, fn, timerMax) { 
var dd = $( 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'); 
dd[0].timerMax = timerMax || 3; 
return dd.dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
open: function(e, ui) { 
var me = this, 
dlg = $(this), 
btn = dlg.parent().find(".ui-button-text").text("确定(" + me.timerMax + ")"); 
--me.timerMax; 
me.timer = window.setInterval(function() { 
btn.text("确定(" + me.timerMax + ")"); 
if (me.timerMax-- <= 0) { 
dlg.dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(me.timer); // 时间到了清除计时器 
} 
}, 1000); 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(this.timer); // 清除计时器 
} 
}, 
close: function() { 
window.clearInterval(this.timer); // 清除计时器 
} 
}); 
}, 
// jQuery UI confirm弹出确认提示 
jqconfirm: function(text, title, fn1, fn2) { 
var html = 
'<div class="dialog" id="dialog-confirm">' + 
' <p>' + 
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn1 && fn1.call(dlg, true); 
}, 
"取消": function() { 
var dlg = $(this).dialog("close"); 
fn2 && fn2(dlg, false); 
} 
} 
}); 
}, 
// jQuery UI 弹出iframe窗口 
jqopen: function(url, options) { 
var html = 
'<div class="dialog" id="dialog-window" title="提示信息">' + 
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' + 
'</div>'; 
return $(html).dialog($.extend({ 
modal: true, 
closeOnEscape: false, 
draggable: false, 
resizable: false, 
close: function(event, ui) { 
$(this).dialog("destroy"); // 关闭时销毁 
} 
}, options)); 
}, 
// jQuery UI confirm提示 
confirm: function(evt, text, title) { 
evt = $.event.fix(evt); 
var me = evt.target; 
if (me.confirmResult) { 
me.confirmResult = false; 
return true; 
} 
jQuery.jqconfirm(text, title, function(e) { 
me.confirmResult = true; 
if (e) { 
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) { 
$.globalEval(me.href); 
me.confirmResult = false; 
return; 
} 
var t = me.type && me.type.toLowerCase(); 
if (t && me.name && (t == "image" || t == "submit" || t == "button")) { 
__doPostBack(me.name, ""); 
me.confirmResult = false; 
return; 
} 
if (me.click) me.click(evt); 
} 
return false; 
}); 
return false; 
} 
}); 

以上代码还存在一个问题，就是每次弹出框关闭之后都没有销毁。

解决办法有（具体不演示）：

在close事件里面destroy
把alert/confirm提供里的dialog实例设置成静态的
在外部调用使用单个dialog实例
演示程序
html代码如下：

<div> 
<input type="button" id="button1" value="普通提示" /> 
<input type="button" id="button2" value="自动关闭提示" /> 
<input type="button" id="button3" value="确认提示" /> 
<input type="button" id="button4" value="确认提示2" /> 
<input type="button" id="button5" value="打开窗口" /> 
</div> 

相应js代码如下：

$(function() { 
$("#button1").click(function() { 
$.jqalert("这是普通提示！"); 
}); 
$("#button2").click(function() { 
$.jqtimeralert("这是自动关闭的提示！", "自动关闭提示", 
function() { 
$.jqalert("时间到"); 
}); 
}); 
$("#button3").click(function() { 
$.jqconfirm("确定要这么做吗？", "确认提示", 
function() { 
$.jqalert("点了确定"); 
}, 
function() { 
$.jqalert("点了取消"); 
}); 
}); 
$("#button4").click(function(e) { 
if ($.confirm(e, "确定要这么做吗？")) 
$.jqalert("点了确定"); 
}); 
$("#button5").click(function(e) { 
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 }); 
}); 
}); 

对于服务器端控件使用confirm，可能需要如下方法：

$("#button4").click(function(e) { 
if (!$.confirm(e, "确定要这么做吗？")) { 
e.stopPropagation(); 
return false; 
} 
}); 

额外再提一下，jQuery UI使用的字体都是以em为单位，可能会导致平常使用时dialog变得比较大，可以额外设置以下样式：

body { font-size: 12px; } // 默认字体大小 
/*jQuery UI fakes*/ 
.ui-widget { font-size: 1em; } 
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; } 

这样子，dialog的大小看起来就比较正常了。
在Telerik RadControls for asp.net ajax中使用
主要是针对telerik RadButton控件，定义如下两个函数：

// 用于RadButton的confirm确认回调，即触发按钮点击 
function radcallback(s) { 
return Function.createDelegate(s, function(argument) { 
if (argument) { 
this.click(); 
} 
}); 
} 
// 用于为RadButton添加confirm提示 
function radconfirm2(textOrFn, title, callback) { 
return function(s, e) { 
$.jqconfirm(textOrFn, title, callback || radcallback(s)); 
//radconfirm(textOrFn, callback, 280, 50, null, title); 
e.set_cancel(true); 
}; 
} 

然后可以这样使用：

<telerik:RadButton ... OnClientClicking="radconfirm2('确定要这么做吗?')" />

结尾
更多的资料请看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。
脚本之家下载地址 https://www.jb51.net/jiaoben/15574.html
本文演示下载 lwme-jquery-ui-dialog-demo.7z
作者：囧月
出处：http://lwme.cnblogs.com/

您可能感兴趣的文章:

• jQuery Dialog 弹出层对话框插件
• 基于jQuery的弹出警告对话框美化插件(警告，确认和提示)
• jquery删除提示框弹出是否删除对话框
• Jquery EasyUI中弹出确认对话框以及加载效果示例代码
• boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
• JQuery弹出炫丽对话框的同时让背景变灰色
• jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
• 非常强大的 jQuery.AsyncBox 弹出对话框插件
• Jquery实现页面加载时弹出对话框代码
• jQuery实现单击按钮遮罩弹出对话框效果（2）