jQuery通用对话框

jquery.dialog.js

/*!
 * 通用对话框
 * @author shajunxing
 * @version 0.0.0.0
 */

(function ($) {
    /* 对话框类型，决定图标类型
     * 默认按钮为：
     * 空：[确定]
     * 信息：[确定]
     * 警告：[确定]
     * 错误：[确定]
     * 请选择：[是，否]
     */
    $.DIALOG_TYPE_NONE = \'\';
    $.DIALOG_TYPE_SUCCESS = \'成功\';
    $.DIALOG_TYPE_INFORMATION = \'信息\';
    $.DIALOG_TYPE_WARNING = \'警告\';
    $.DIALOG_TYPE_ERROR = \'错误\';
    $.DIALOG_TYPE_QUESTION = \'请选择\';

    // 对话框按钮
    $.DIALOG_BUTTON_OK = \'确定\';
    $.DIALOG_BUTTON_CANCEL = \'取消\';
    $.DIALOG_BUTTON_YES = \'是\';
    $.DIALOG_BUTTON_NO = \'否\';

    // 对话框按钮组合，注意要反转，因为对话框按钮是向右排列的
    $.DIALOG_BUTTONS_NONE = [];
    $.DIALOG_BUTTONS_OK = [$.DIALOG_BUTTON_OK];
    $.DIALOG_BUTTONS_OK_CANCEL = [$.DIALOG_BUTTON_CANCEL, $.DIALOG_BUTTON_OK];
    $.DIALOG_BUTTONS_YES_NO = [$.DIALOG_BUTTON_NO, $.DIALOG_BUTTON_YES];
    $.DIALOG_BUTTONS_YES_NO_CANCEL = [$.DIALOG_BUTTON_CANCEL, $.DIALOG_BUTTON_NO, $.DIALOG_BUTTON_YES];

    $.dialog = function (message, title, type, buttons, onClose) {
        // 待返回的对话框对象
        var obj = {};

        obj.onClose = onClose;

        obj.close = function (button) {
            $(document).unbind(\'keyup\', obj.keyUp);
            obj.overlay.remove();
            if (obj.onClose && typeof obj.onClose == \'function\') {
                obj.onClose(button);
            }
        };

        // ESC关闭对话框
        obj.keyUp = function (e) {
            // ESC关闭对话框统一返回DIALOG_BUTTON_CANCEL
            if (e.which == 27) obj.close($.DIALOG_BUTTON_CANCEL);
            return true;
        };

        // 覆盖层
        obj.overlay = jQuery(\'<div>\', {
            \'class\':\'dialog_overlay\'
        });

        // 对话框
        var dialog = jQuery(\'<div>\', {
            \'class\':\'dialog\'
        });

        dialog.appendTo(obj.overlay);

        // 根据类型决定默认的图标、按钮、标题
        var _title = null;
        var _class = null;
        var _buttons = null;
        switch (type) {
            case $.DIALOG_TYPE_SUCCESS:
                _title = null;
                _class = \'dialog_body dialog_icon dialog_success\';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_INFORMATION:
                _title = null;
                _class = \'dialog_body dialog_icon dialog_information\';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_WARNING:
                _title = null;
                _class = \'dialog_body dialog_icon dialog_warning\';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_ERROR:
                _title = null;
                _class = \'dialog_body dialog_icon dialog_error\';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_QUESTION:
                _title = null;
                _class = \'dialog_body dialog_icon dialog_question\';
                _buttons = $.DIALOG_BUTTONS_OK_CANCEL;
                break;
            default:
                _title = null;
                _class = \'dialog_body\';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
        }
        // 如果有自定义标题
        if (title) {
            _title = title;
        }
        // 如果有自定义按钮
        if (buttons && $.isArray(buttons)) {
            _buttons = buttons;
        }

        if (_title) {
            jQuery(\'<div>\', {
                \'class\':\'dialog_title\'
            }).html(_title).appendTo(dialog);
        }

        var _message = jQuery(\'<div>\', {
            \'class\':_class
        });

        jQuery(\'<div>\').html(message).appendTo(_message);

        _message.appendTo(dialog);

        // 按钮
        if (_buttons != $.DIALOG_BUTTONS_NONE) {
            var button_bar = jQuery(\'<div>\', {
                \'class\':\'dialog_buttons\'
            }).appendTo(dialog);
            $.each(_buttons, function (index, value) {
                jQuery(\'<a>\', {
                    \'href\':\'javascript:void(0)\',
                    \'class\':\'dialog_button\' + index
                }).html(value).bind(\'click\',
                    function () {
                        obj.close(value)
                    }).appendTo(button_bar);
            });
        }

        jQuery(\'<div>\', {
            \'style\':\'clear:both\'
        }).appendTo(button_bar);

        $(document).bind(\'keyup\', obj.keyUp);

        obj.overlay.appendTo(\'body\');
    };

    // 一些预定义的对话框
    $.dialogSuccess = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_SUCCESS);
    };
    $.dialogInformation = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_INFORMATION);
    };
    $.dialogWarning = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_WARNING);
    };
    $.dialogError = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_ERROR);
    };
    $.dialogConfirm = function (message, onOk) {
        $.dialog(message, null, $.DIALOG_TYPE_QUESTION, null, function(button) {
            if ((button == $.DIALOG_BUTTON_OK) && onOk) {
                onOk();
            }
        });
    };

})(jQuery);

2. [文件] jquery.dialog.css ~ 2KB

.dialog_overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.dialog {
    position: relative;
    margin: 0 auto;
    top: 120px;
    width: 420px;
    background-color: #fff;
    padding: 0;
    /* 仿OSX阴影 */
    box-shadow: 0 15px 31px rgba(0, 0, 0, 0.5);
    border: 1px solid #555753;
    z-index: 2001;
}

.dialog .dialog_title {
    margin: 0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 5px;
    height: 13px;
    line-height: 13px;
}

.dialog .dialog_body {
    background: 10px 10px no-repeat;
    padding: 10px;
    text-align: left;
}

.dialog .dialog_body > div {
    overflow: auto;
    margin-top: 12px;
}

/* 与图标相关 */
.dialog .dialog_icon {
    padding-left: 68px;
    min-height: 48px;
}

.dialog .dialog_success {
    background-image: url(\'../_images/success_48.png\');
}

.dialog .dialog_question {
    background-image: url(\'../_images/question_48.png\');
}

.dialog .dialog_information {
    background-image: url(\'../_images/information_48.png\');
}

.dialog .dialog_warning {
    background-image: url(\'../_images/warning_48.png\');
}

.dialog .dialog_error {
    background-image: url(\'../_images/error_48.png\');
}

.dialog .dialog_buttons {
    padding: 5px 5px 5px 10px;
    background-color: #ddedff;
}

.dialog .dialog_buttons a {
    text-decoration: none;
    float: right;
    margin-right: 5px;
    min-width: 80px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    color: #2e3436;
    background-color: #fff;
    border: 1px solid #39f;
}

.dialog .dialog_buttons a:hover {
    background-color: #9cf;
}