对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 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 = [
                '<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"/>'
        
            相关阅读
            
                
                    
                    ·  猜猜，谁从从科幻走进现实了？2012.10.21
                    
                    ·  在网页设计中应用大照片作背景的52个优秀范例（上篇）2012.10.21
                    
                    ·  HTML特殊字符编码对照表2012.10.21
                    
                    ·  常见Web技术之间的关系，你了解多少？2012.10.21
                    
                    ·  for(var key in object){}语句枚举2012.10.21

联系我们CONTACT 扫一扫

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。

版权所有：广州中睿信息技术有限公司 粤ICP备13082838号-2