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