jquery封装对话框插件

jquery.ui.dialog是一个友好的对话框插件，为了方便使用我们将使用jquery.ui.dialog封装一个易用的对话框插件,代码：

 

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实例