jquery blockUI 擴展插件 Dialog

對jQuery blockUI插件進行了小的封裝擴展，支持confirm、alert、dialog彈出窗口提示信息，支持按鈕回調事件。可以自定義css樣式、覆蓋blockUI的樣式等

首先要到jquery blockUI 官方網址：http://malsup.com/jquery/block/

下載jquery.blockUI JS lib：http://malsup.com/jquery/block/jquery.blockUI.js?v2.38

而且還需要jquery lib：http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

jquery.blockUI.dialog.js

/***
 * jquery blockUI Dialog plugin 
 * v1.1 
 * @createDate -- 2012-1-4
 * @author hoojo
 * @email [email protected]
 * @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 = [
				'<div class="dialog confirm">',
				'<p>',
				message,
				'</p>',
				'<input type="button" value="',
				okText,
				'" class="btn ok-btn"/>',
				'<input type="button" value="',
				cancelText,
				'" class="btn cancel-btn"/>'
			].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 = [
				'<div class="dialog alert">',
				'<p>',
				message,
				'</p>',
				'<input type="button" value="',
				okText,
				'" class="btn ok-btn"/>'
			].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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>blockUI Dialog Examples</title>
	
    <meta http-equiv="author" content="hoojo">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="blockUI/block.dialog.css" />
    <script type="text/javascript" charset="UTF-8" src="mobile/jquery-1.6.4.js"></script>
    <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI-2.3.8.js"></script>
    <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI.dialog-1.1.js"></script>
	
	<script type="text/javascript">
		;(function ($) {
			$(function () {
			
				// dialog 提示框
				$("#dialog").click(function () {
					//$.dialog();
					//$.dialog({message: $("#callback")});
					$.dialog({
						//theme: true, // 設置主題需要jquery UI http://www.malsup.com/jquery/block/theme.html				
						title: "dialog",
						message: $("#callback"),
						fadeIn: 1000,
						fadeOut: 1200
					});
					setTimeout($.removeDialog, 2000);
				});
				
				// 帶確定、取消按鈕提示框，支持事件回調，及message等屬性配置
				$("#confirm").click(function () {
					$.confirm({
						message: "你確定要刪除嗎？",
						okText: "確定",
						cancelText: "取消",
						onOk: function () {
							alert("你點擊了確定按鈕");
						},
						onCancel: function () {
							alert("你點擊了取消按鈕");
						}
					});
				});	
				
				// 警告提示框 對象模式配置css、message、按鈕文本提示
				$("#alert").click(function () {
					$.alert({
						message: "你確定要刪除嗎？",
						okText: "確定",
						css: {
							"background-color": "white",
							"color": "red"
						},
						onOk: function () {
							alert("你點擊了確定按鈕");
						}
					});
				});
				
				// 非對象配置屬性，多個參數配置
				/**
				  $.confirm 方法參數config配置介紹：
				  當第一個參數是一個對象：
				  對象中可以出現以下屬性配置，並且可以出現$.blockUI的配置
				  	{
						message: arguments[i++] || "default confirm message!",
						onOk: arguments[i++] || _options.emptyHandler(),
						onCancel: arguments[i++] || _options.emptyHandler(),
						okText: arguments[i++] || "ok",
						cancelText: arguments[i] || "cancel"
					}
					message 是提示框的提示信息
					onOk是確定按鈕的click回調函數
					onCancel 是取消按鈕的click事件回調方法
					okText是ok按鈕的文字 默認是ok
					cancelText是cancel按鈕的文本內容
				  
				  如果第一個參數不是一個對象，那麼
				  	參數1表示 message 及提示文字
					參數2表示ok按鈕的click事件回調函數
					參數3表示cancel按鈕的click事件回調函數
					參數4表示ok按鈕的文本
					參數5表示cancel按鈕的文本內容
					
				  注意：如果第一參數是一個對象，後面又出現了相應的參數配置；這種情況下對象配置優先於
				  後面的參數配置，而且參數的位置也會改變：
				  	參數1是對象配置
					參數2表示 message 及提示文字
					參數3表示ok按鈕的click事件回調函數
					參數4表示cancel按鈕的click事件回調函數
					參數5表示ok按鈕的文本
					參數6表示cancel按鈕的文本內容
				*/
				$("#confirm2").click(function () {
					$.confirm({ message: "is a message", timeout: 3000 }, "message", function () {
							alert("success");
						}, function () {
							alert("failure");
						}, "按鈕");
				});	
				
				/**
				   第一個參數是對象配置，當對象配置中出現的選項會覆蓋後面的參數配置
				   $.alert 方法 config 介紹：
				   當第一個參數 是一個對象：
				 	{
				 		message: arguments[i++] || "default alert message!",
				 		onOk: arguments[i++] || _options.emptyHandler(),
				 		okText: arguments[i] || "ok"
					}
					message 是提示框的提示信息
					onOk是確定按鈕回調函數
					okText是ok按鈕的文字 默認是ok
					
				  當第一個參數不是一個對象的情況下，那麼
					參數1表示 message 及提示文字
					參數2表示ok按鈕的click事件
					參數3表示ok按鈕的文本
					
					注意：如果第一個參數是一個對象，對象中出現的配置：message、onOk、okText，這些配置將會
					覆蓋後面的配置，也就是說這些配置在第一個參數中出現後，後面的參數就不需要
				 */
				$("#alert2").click(function () {
					$.alert({
						css: {
							"background-color": "red"
						},
						timeout: 1200,
						onOk: function () {
							alert("確定");
						}
					}, 
					"你有一條消息", 
					function () {
						alert("被覆蓋");
					}, "yes?");
				});		
				
				var _confirm = function (msg) {
					$.confirm({
						message: msg,
						onOk: function () {
							alert("你點擊了確定按鈕");
						},
						onCancel: function () {
							alert("你點擊了取消按鈕");
						}
					});
				};
				$("#confirm3").click(function () {
					_confirm("message");
				});		
				
				var _alert = function (msg) {
					$.alert({
						message: msg,
						css: {
							"background-color": "white",
							"color": "red"
						},
						onOk: function () {
							alert("你點擊了確定按鈕");
						}
					});
				}
				$("#alert3").click(function () {
					_alert();
				});	
			});
		})(jQuery);
	</script>
	
  </head>
  	
  <body>
  	<ul>
  		<h2>jQuery blockUI Dialog Demos</h2>
  		<li>dialog demo <input type="button" value="dialog" id="dialog"/></li>
  		<li>confirm callback demos<input type="button" value="confirm" id="confirm"/></li>
  		<li>confirm callback demos 2<input type="button" value="confirm" id="confirm2"/></li>
  		<li>confirm callback demos 3<input type="button" value="confirm" id="confirm3"/></li>
  		<li>alert callback demos<input type="button" value="alert" id="alert"/></li>
  		<li>alert callback demos 2<input type="button" value="alert" id="alert2"/></li>
  		<li>alert callback demos 3<input type="button" value="alert" id="alert3"/></li>
  	</ul>
  	
  	<div style="display: none;">
	  	<div id="callback">
	  		<p>ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos</p>
	  		<input type="button" value="OK" class="btn ok-btn"/>
	  		<input type="button" value="Cancel" class="btn cancel-btn"/>
	  	</div>
  	</div>
  </body>
</html>

截圖效果

confirm

alert