对jQuery blockUI插件进行了小的封装扩展，支持confirm、alert、dialog弹出窗口提示信息，支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等

首先要到jquery blockUI 官方网址：

下载jquery.blockUI JS lib：

而且还需要jquery lib：

jquery.blockUI.dialog.js

/*** * jquery blockUI Dialog plugin  * v1.1  * @createDate -- 2012-1-4 * @author hoojo * @email hoojo_@126.com * @requires jQuery v1.2.3 or later, jquery.blockUI-2.3.8 * Copyright (c) 2012 M. hoo * Dual licensed under the MIT and GPL licenses: * http://hoojo.cnblogs.com * http://blog.csdn.net/IBM_hoojo **/;(function ($) {		var _dialog = $.blockUI.dialog = {};		// dialog 默认配置	var defaultOptions = {		css: {             padding: '8px',             opacity: .7,             color: '#ffffff',             border: 'none',             'border-radius': '10px',             backgroundColor: '#000000' 		},				// 默认回调函数 取消或隐藏 dialog		emptyHandler: function () {			$.unblockUI();		},				// 用户回调函数		callbackHandler: function (fn) {			return function () {				fn();				defaultOptions.emptyHandler();			};		},				// confirm 提示 html元素		confirmElement: function (settings) {			settings = settings || {};			var message = settings.message || "default confirm message!";			var okText = settings.okText || "ok";			var cancelText = settings.cancelText || "cancel";						if (typeof settings.onOk !== "function") {				settings.onOk = this.emptyHandler;			}			if (typeof settings.onCancel !== "function") {				settings.onCancel = this.emptyHandler;			}			var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;			var cancelCallback = this.callbackHandler(settings.onCancel) || this.emptyHandler;						var html = [				'
    
     ',				'
     
',				message,				'
',				'
     ',				'
     '			].join("");						var $el = $(html);			$el.find(":button").get(0).onclick =  okCallback;			$el.find(":button:last").get(0).onclick = cancelCallback;			return $el;		},				// alert 提示html元素		alertElement: function (settings) {			settings = settings || {};			var message = settings.message || "default alert message!";			var okText = settings.okText || "ok";						if (typeof settings.onOk !== "function") {				settings.onOk = this.emptyHandler;			}						var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;						var html = [				'
     
      ',				'
      
',				message,				'
',				'
      '			].join("");						var $el = $(html);						$el.find(":button:first").get(0).onclick =  okCallback;			return $el;		}	};		var _options = defaultOptions;		// 对外公开的dialog提示html元素，提供配置、覆盖	$.blockUI.dialog.confirmElement = function () {		return _options.confirmElement(arguments[0]);	};		$.blockUI.dialog.alertElement = function () {		return _options.alertElement(arguments[0]);	};		// 提供jquery 插件方法	$.extend({		confirm: function (opts) {			var i = (typeof opts === "object") ? 1 : 0;			var defaults = {				message: arguments[i++] || "default confirm message!",				onOk: arguments[i++] || _options.emptyHandler(),				onCancel: arguments[i++] || _options.emptyHandler(),				okText: arguments[i++] || "ok",				cancelText: arguments[i] || "cancel"			};			opts = opts || {};			opts.css = $.extend({}, _options.css, opts.css);						// 覆盖默认配置			var settings = $.extend({}, _options, defaults, opts);			settings = $.extend(settings, { message: _dialog.confirmElement(settings) });			settings = $.extend({}, $.blockUI.defaults, settings);			$.blockUI(settings);		},		alert: function (opts) {			var i = (typeof opts === "object") ? 1 : 0;						var defaults = {				message: arguments[i++] || "default alert message!",				onOk: arguments[i++] || _options.emptyHandler(),				okText: arguments[i] || "ok"			};						opts = opts || {};			opts.css = $.extend({}, _options.css, opts.css);						var settings = $.extend({}, _options, defaults, opts);			settings = $.extend(settings, { message: _dialog.alertElement(settings) });			settings = $.extend({}, $.blockUI.defaults, settings);			$.blockUI(settings);		},				// dialog提示		dialog: function (opts) {			var settings = $.extend({}, $.blockUI.defaults, _options, opts || {});			$.blockUI(settings);		},		// 移除dialog提示框		removeDialog: function () {			_options.emptyHandler();		}	});})(jQuery);
     
    

应用样式文件block.dialog.css

dialog是全局样式，btn是所有按钮的样式、ok-btn是ok按钮样式、cancel-btn是取消按钮样式

.dialog {	font-size: 12px;}.dialog .btn {	border: 1px solid white;	border-radius: 5px;	min-width: 25%;	width: auto;}.dialog .ok-btn {	background-color: #ccc;}.dialog .cancel-btn { 	/*background-color: #aeface;*/	margin-left: 10%;}

examples.html

      	    
        
            
                			    	    	
    
  		
     
jQuery blockUI Dialog Demos
  		
     
dialog demo 
  		
     
confirm callback demos
  		
     
confirm callback demos 2
  		
     
confirm callback demos 3
  		
     
alert callback demos
  		
     
alert callback demos 2
  		
     
alert callback demos 3
  	
    
  	  	
    
	  	
     
	  		
      
ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos
	  		
      	  		
      	  	
     
  	
    
  

截图效果

confirm

alert