对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

    1.       /***
    2.  * jquery blockUI Dialog plugin 
    3.  * v1.1 
    4.  * @createDate -- 2012-1-4
    5.  * @author hoojo
    6.  * @email hoojo_@126.com
    7.  * @requires jQuery v1.2.3 or later, jquery.blockUI-2.3.8
    8.  * Copyright (c) 2012 M. hoo
    9.  * Dual licensed under the MIT and GPL licenses:
    10.  * http://hoojo.cnblogs.com
    11.  * http://blog.csdn.net/IBM_hoojo
    12.  **/
    14. ;(function ($) {
    16.     var _dialog = $.blockUI.dialog = {};
    18.     // dialog 默认配置
    19.     var defaultOptions = {
    20.         css: { 
    21.             padding: '8px', 
    22.             opacity: .7, 
    23.             color: '#ffffff', 
    24.             border: 'none', 
    25.             'border-radius': '10px', 
    26.             backgroundColor: '#000000' 
    27.         },
    29.         // 默认回调函数 取消或隐藏 dialog
    30.         emptyHandler: function () {
    31.             $.unblockUI();
    32.         },
    34.         // 用户回调函数
    35.         callbackHandler: function (fn) {
    36.             return function () {
    37.                 fn();
    38.                 defaultOptions.emptyHandler();
    39.             };
    40.         },
    42.         // confirm 提示 html元素
    43.         confirmElement: function (settings) {
    44.             settings = settings || {};
    45.             var message = settings.message || "default confirm message!";
    46.             var okText = settings.okText || "ok";
    47.             var cancelText = settings.cancelText || "cancel";
    49.             if (typeof settings.onOk !== "function") {
    50.                 settings.onOk = this.emptyHandler;
    51.             }
    52.             if (typeof settings.onCancel !== "function") {
    53.                 settings.onCancel = this.emptyHandler;
    54.             }
    55.             var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;
    56.             var cancelCallback = this.callbackHandler(settings.onCancel) || this.emptyHandler;
    58.             var html = [
    59.                 '<div class="dialog confirm">',
    60.                 '<p>',
    61.                 message,
    62.                 '</p>',
    63.                 '<input type="button" value="',
    64.                 okText,
    65.                 '" class="btn ok-btn"/>',
    66.                 '<input type="button" value="',
    67.                 cancelText,
    68.                 '" class="btn cancel-btn"/>'
    69.             ].join("");
    71.             var $el = $(html);
    72.             $el.find(":button").get(0).onclick =  okCallback;
    73.             $el.find(":button:last").get(0).onclick = cancelCallback;
    74.             return $el;
    75.         },
    77.         // alert 提示html元素
    78.         alertElement: function (settings) {
    79.             settings = settings || {};
    80.             var message = settings.message || "default alert message!";
    81.             var okText = settings.okText || "ok";
    83.             if (typeof settings.onOk !== "function") {
    84.                 settings.onOk = this.emptyHandler;
    85.             }
    87.             var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;
    89.             var html = [
    90.                 '<div class="dialog alert">',
    91.                 '<p>',
    92.                 message,
    93.                 '</p>',
    94.                 '<input type="button" value="',
    95.                 okText,
    96.                 '" class="btn ok-btn"/>'
    97.             ].join("");
    99.             var $el = $(html);
    101.             $el.find(":button:first").get(0).onclick =  okCallback;
    102.             return $el;
    103.         }
    104.     };
    106.     var _options = defaultOptions;
    108.     // 对外公开的dialog提示html元素，提供配置、覆盖
    109.     $.blockUI.dialog.confirmElement = function () {
    110.         return _options.confirmElement(arguments[0]);
    111.     };
    113.     $.blockUI.dialog.alertElement = function () {
    114.         return _options.alertElement(arguments[0]);
    115.     };
    117.     // 提供jquery 插件方法
    118.     $.extend({
    119.         confirm: function (opts) {
    120.             var i = (typeof opts === "object") ? 1 : 0;
    121.             var defaults = {
    122.                 message: arguments[i++] || "default confirm message!",
    123.                 onOk: arguments[i++] || _options.emptyHandler(),
    124.                 onCancel: arguments[i++] || _options.emptyHandler(),
    125.                 okText: arguments[i++] || "ok",
    126.                 cancelText: arguments[i] || "cancel"
    127.             };
    128.             opts = opts || {};
    129.             opts.css = $.extend({}, _options.css, opts.css);
    131.             // 覆盖默认配置
    132.             var settings = $.extend({}, _options, defaults, opts);
    133.             settings = $.extend(settings, { message: _dialog.confirmElement(settings) });
    134.             settings = $.extend({}, $.blockUI.defaults, settings);
    135.             $.blockUI(settings);
    136.         },
    137.         alert: function (opts) {
    138.             var i = (typeof opts === "object") ? 1 : 0;
    140.             var defaults = {
    141.                 message: arguments[i++] || "default alert message!",
    142.                 onOk: arguments[i++] || _options.emptyHandler(),
    143.                 okText: arguments[i] || "ok"
    144.             };
    146.             opts = opts || {};
    147.             opts.css = $.extend({}, _options.css, opts.css);
    149.             var settings = $.extend({}, _options, defaults, opts);
    150.             settings = $.extend(settings, { message: _dialog.alertElement(settings) });
    151.             settings = $.extend({}, $.blockUI.defaults, settings);
    152.             $.blockUI(settings);
    153.         },
    155.         // dialog提示
    156.         dialog: function (opts) {
    157.             var settings = $.extend({}, $.blockUI.defaults, _options, opts || {});
    158.             $.blockUI(settings);
    159.         },
    160.         // 移除dialog提示框
    161.         removeDialog: function () {
    162.             _options.emptyHandler();
    163.         }
    164.     });
    165. })(jQuery);
    166.

    应用样式文件block.dialog.css

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

    1.       .dialog {
    2.     font-size: 12px;
    3. }
    5. .dialog .btn {
    6.     border: 1px solid white;
    7.     border-radius: 5px;
    8.     min-width: 25%;
    9.     width: auto;
    10. }
    12. .dialog .ok-btn {
    13.     background-color: #ccc;
    14. }
    16. .dialog .cancel-btn { 
    17.     /*background-color: #aeface;*/
    18.     margin-left: 10%;
    19. }
    20.

    examples.html

    1.       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3.   <head>
    4.     <title>blockUI Dialog Examples</title>
    6.     <meta http-equiv="author" content="hoojo">
    7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    9.     <link rel="stylesheet" href="blockUI/block.dialog.css" />
    10.     <script type="text/javascript" charset="UTF-8" src="mobile/jquery-1.6.4.js"></script>
    11.     <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI-2.3.8.js"></script>
    12.     <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI.dialog-1.1.js"></script>
    14.     <script type="text/javascript">
    15.         ;(function ($) {
    16.             $(function () {
    18.                 // dialog 提示框
    19.                 $("#dialog").click(function () {
    20.                     //$.dialog();
    21.                     //$.dialog({message: $("#callback")});
    22.                     $.dialog({
    23.                         //theme: true, // 设置主题需要jquery UI http://www.malsup.com/jquery/block/theme.html             
    24.                         title: "dialog",
    25.                         message: $("#callback"),
    26.                         fadeIn: 1000,
    27.                         fadeOut: 1200
    28.                     });
    29.                     setTimeout($.removeDialog, 2000);
    30.                 });
    32.                 // 带确定、取消按钮提示框，支持事件回调，及message等属性配置
    33.                 $("#confirm").click(function () {
    34.                     $.confirm({
    35.                         message: "你确定要删除吗？",
    36.                         okText: "确定",
    37.                         cancelText: "取消",
    38.                         onOk: function () {
    39.                             alert("你点击了确定按钮");
    40.                         },
    41.                         onCancel: function () {
    42.                             alert("你点击了取消按钮");
    43.                         }
    44.                     });
    45.                 }); 
    47.                 // 警告提示框 对象模式配置css、message、按钮文本提示
    48.                 $("#alert").click(function () {
    49.                     $.alert({
    50.                         message: "你确定要删除吗？",
    51.                         okText: "确定",
    52.                         css: {
    53.                             "background-color": "white",
    54.                             "color": "red"
    55.                         },
    56.                         onOk: function () {
    57.                             alert("你点击了确定按钮");
    58.                         }
    59.                     });
    60.                 });
    62.                 // 非对象配置属性，多个参数配置
    63.                 /**
    64.                   $.confirm 方法参数config配置介绍：
    65.                   当第一个参数是一个对象：
    66.                   对象中可以出现以下属性配置，并且可以出现$.blockUI的配置
    67.                     {
    68.                         message: arguments[i++] || "default confirm message!",
    69.                         onOk: arguments[i++] || _options.emptyHandler(),
    70.                         onCancel: arguments[i++] || _options.emptyHandler(),
    71.                         okText: arguments[i++] || "ok",
    72.                         cancelText: arguments[i] || "cancel"
    73.                     }
    74.                     message 是提示框的提示信息
    75.                     onOk是确定按钮的click回调函数
    76.                     onCancel 是取消按钮的click事件回调方法
    77.                     okText是ok按钮的文字 默认是ok
    78.                     cancelText是cancel按钮的文本内容
    80.                   如果第一个参数不是一个对象，那么
    81.                     参数1表示 message 及提示文字
    82.                     参数2表示ok按钮的click事件回调函数
    83.                     参数3表示cancel按钮的click事件回调函数
    84.                     参数4表示ok按钮的文本
    85.                     参数5表示cancel按钮的文本内容
    87.                   注意：如果第一参数是一个对象，后面又出现了相应的参数配置；这种情况下对象配置优先于
    88.                   后面的参数配置，而且参数的位置也会改变：
    89.                     参数1是对象配置
    90.                     参数2表示 message 及提示文字
    91.                     参数3表示ok按钮的click事件回调函数
    92.                     参数4表示cancel按钮的click事件回调函数
    93.                     参数5表示ok按钮的文本
    94.                     参数6表示cancel按钮的文本内容
    95.                 */
    96.                 $("#confirm2").click(function () {
    97.                     $.confirm({ message: "is a message", timeout: 3000 }, "message", function () {
    98.                             alert("success");
    99.                         }, function () {
    100.                             alert("failure");
    101.                         }, "按钮");
    102.                 }); 
    104.                 /**
    105.                    第一个参数是对象配置，当对象配置中出现的选项会覆盖后面的参数配置
    106.                    $.alert 方法 config 介绍：
    107.                    当第一个参数 是一个对象：
    108.                     {
    109.                         message: arguments[i++] || "default alert message!",
    110.                         onOk: arguments[i++] || _options.emptyHandler(),
    111.                         okText: arguments[i] || "ok"
    112.                     }
    113.                     message 是提示框的提示信息
    114.                     onOk是确定按钮回调函数
    115.                     okText是ok按钮的文字 默认是ok
    117.                   当第一个参数不是一个对象的情况下，那么
    118.                     参数1表示 message 及提示文字
    119.                     参数2表示ok按钮的click事件
    120.                     参数3表示ok按钮的文本
    122.                     注意：如果第一个参数是一个对象，对象中出现的配置：message、onOk、okText，这些配置将会
    123.                     覆盖后面的配置，也就是说这些配置在第一个参数中出现后，后面的参数就不需要
    124.                  */
    125.                 $("#alert2").click(function () {
    126.                     $.alert({
    127.                         css: {
    128.                             "background-color": "red"
    129.                         },
    130.                         timeout: 1200,
    131.                         onOk: function () {
    132.                             alert("确定");
    133.                         }
    134.                     }, 
    135.                     "你有一条消息", 
    136.                     function () {
    137.                         alert("被覆盖");
    138.                     }, "yes?");
    139.                 });     
    141.                 var _confirm = function (msg) {
    142.                     $.confirm({
    143.                         message: msg,
    144.                         onOk: function () {
    145.                             alert("你点击了确定按钮");
    146.                         },
    147.                         onCancel: function () {
    148.                             alert("你点击了取消按钮");
    149.                         }
    150.                     });
    151.                 };
    152.                 $("#confirm3").click(function () {
    153.                     _confirm("message");
    154.                 });     
    156.                 var _alert = function (msg) {
    157.                     $.alert({
    158.                         message: msg,
    159.                         css: {
    160.                             "background-color": "white",
    161.                             "color": "red"
    162.                         },
    163.                         onOk: function () {
    164.                             alert("你点击了确定按钮");
    165.                         }
    166.                     });
    167.                 }
    168.                 $("#alert3").click(function () {
    169.                     _alert();
    170.                 }); 
    171.             });
    172.         })(jQuery);
    173.     </script>
    175.   </head>
    177.   <body>
    178.     <ul>
    179.         <h2>jQuery blockUI Dialog Demos</h2>
    180.         <li>dialog demo <input type="button" value="dialog" id="dialog"/></li>
    181.         <li>confirm callback demos<input type="button" value="confirm" id="confirm"/></li>
    182.         <li>confirm callback demos 2<input type="button" value="confirm" id="confirm2"/></li>
    183.         <li>confirm callback demos 3<input type="button" value="confirm" id="confirm3"/></li>
    184.         <li>alert callback demos<input type="button" value="alert" id="alert"/></li>
    185.         <li>alert callback demos 2<input type="button" value="alert" id="alert2"/></li>
    186.         <li>alert callback demos 3<input type="button" value="alert" id="alert3"/></li>
    187.     </ul>
    189.     <div style="display: none;">
    190.         <div id="callback">
    191.             <p>ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos</p>
    192.             <input type="button" value="OK" class="btn ok-btn"/>
    193.             <input type="button" value="Cancel" class="btn cancel-btn"/>
    194.         </div>
    195.     </div>
    196.   </body>
    197. </html>
    198.

    截图效果

    confirm

    alert