jquery Dialog弹框插件

function Dialog(options) {
    var defaults = {
        // 默认值。
        title: '',       // 标题文本，若不想显示title请通过CSS设置其display为none
        type: 'text',    // id,img,iframe,url,text
        content: '',     // 要显示的内容
        showTitle: true,     // 是否显示标题栏。
        closeText: '关闭',  // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none
        closeClass: '',
        buttons: null,     //按钮,
        topOffset: 0,
        padding: 0,
        //width: 250,
        //height: 100,
        position: "center",  // 弹出框位置  'center', 'left', 'right', 'top', 'bottom',
        draggable: false,    // 是否移动
        modal: true,         // 是否是模态对话框
        fixed: false,         // 是否跟随页面滚动。
        time: 0,             // 自动关闭时间，为0表示不会自动关闭。
        id: false,            // 对话框的id，若为false，则由系统自动产生一个唯一id。
        transparent: false
    };
    options = $.extend(defaults, options);
    options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
    var overlayId = options.id + '-overlay'; // 遮罩层ID
    var timeId = null; // 自动关闭计时器
    var isShow = false;
    var isIe = /msie/.test(navigator.userAgent.toLowerCase());
    var isIe6 = 'undefined' == typeof (document.body.style.maxHeight);
    var self = this;

    /* 对话框的布局及标题内容。*/

    var wrapper = $("<div class=\"wrapper\" style=\"position:relative; overflow:hidden; text-align:left;\">");
    if (options.width) {
        wrapper.width(options.width);
    }
    if (options.height) {
        wrapper.height(options.height);
    }
    if (options.background) {
        wrapper.css("background", options.background);
    }

    var dialog = $('<div id="' + options.id + '" class="dialog"></div>').hide();
    if (options.transparent) {
        dialog.addClass("transparent");
        options.showTitle = false;
    }

    var bar = null;
    if (options.showTitle == false) {
        bar = $('<a href="javascript:;" title="Close" class="close ' + options.closeClass + '"></a>');
        bar.css('z-index', ++Dialog.__zindex);
        dialog.append(bar);
    } else {
        bar = $('<div class="bar"><span class="title">' + options.title + '</span><a class="close ' + options.closeClass + '">' + options.closeText + '</a></div>');
        if (options.draggable) {
            bar.css({ cursor: "move" });
        }
        wrapper.append(bar);
    }

    wrapper.append('<div class="content"></div>');
    if (options.padding > 0) {
        $(".content", wrapper).css("padding", options.padding + "px");
    }

    var buttons = $('<div class="buttons"></div>');

    if (options.buttons != null) {
        $(options.buttons).each(function () {
            var item = this;
            var button = $('<input type="button" class="w-btn">');
            button.val(item.name);
            if (item.handler) {
                button.click(function () {
                    item.handler(item.name, self);
                });
            }
            buttons.append(button);
        });
        wrapper.append(buttons);
    }

    dialog.append(wrapper);
    $('body').append(dialog);

    /**
    * 重置对话框的位置。
    *
    * 主要是在需要居中的时候，每次加载完内容，都要重新定位
    *
    * @return void
    */
    var resetPos = function () {
        if (typeof options.position == 'string') {
            switch (options.position.toLowerCase()) {
                case 'center':
                    var left = ($(window).width() - dialog.width()) / 2;
                    var top = ($(window).height() - dialog.height()) / 2;
                    if (!isIe6 && options.fixed) {
                        dialog.css({ top: top + options.topOffset, left: left });
                    } else {
                        dialog.css({ top: top + $(document).scrollTop() + options.topOffset, left: left + $(document).scrollLeft() });
                    }
                    break;
            }
        } else if (typeof options.position == 'object') {
            dialog.css({ left: options.position[0], top: options.position[1] });
        }
    };

    /**
    * 初始化位置及一些事件函数。
    *
    * 其中的this表示Dialog对象而不是init函数。
    */
    var init = function () {
        /* 是否需要初始化背景遮罩层 */
        if (options.modal) {
            $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
            $('#' + overlayId).css({
                'left': 0, 'top': 0,
                /*'width':$(document).width(),*/
                'width': '100%',
                /*'height':'100%',*/
                'height': $(document).height(),
                'z-index': ++Dialog.__zindex,
                'position': 'fixed'
            }).hide();
        }

        dialog.css({ 'z-index': ++Dialog.__zindex, 'position': options.fixed ? 'fixed' : 'absolute' });

        /*  IE6 兼容fixed代码 */
        if (isIe6 && options.fixed) {
            dialog.css('position', 'absolute');
            resetPos();
            var top = parseInt(dialog.css('top')) - $(document).scrollTop();
            var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
            $(window).scroll(function () {
                dialog.css({ 'top': $(document).scrollTop() + top, 'left': $(document).scrollLeft() + left });
            });
        }

        /* 以下代码处理框体是否可以移动 */
        var mouse = { x: 0, y: 0 };
        function moveDialog(event) {
            var e = window.event || event;
            var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
            var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
            dialog.css({ top: top, left: left });
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        };

        dialog.find('.bar').mousedown(function (event) {
            if (!options.draggable) { return; }

            var e = window.event || event;
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            $(document).bind('mousemove', moveDialog);
        });

        $(document).mouseup(function () {
            $(document).unbind('mousemove', moveDialog);
        });

        /* 绑定一些相关事件。 */
        dialog.find('.close').bind('click', this.close);
        dialog.bind('mousedown', function () { dialog.css('z-index', ++Dialog.__zindex); });

        // 自动关闭
        if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
    };

    this.getDialogObj = function () {
        return dialog;
    };

    /**
    * 设置对话框的内容。
    *
    * @param string c 可以是HTML文本。
    * @return void
    */
    this.setContent = function (c) {
        var div = dialog.find('.content');
        switch (c.type.toLowerCase()) {
            case 'id': // 将ID的内容复制过来，原来的还在。
                div.html($('#' + c.content).html());
                if (c.onLoad) {
                    c.onLoad.apply(self);
                }
                break;
            case 'img':
                div.html('<div class="loading"><img src="/images/loading.gif">加载中...</div>');
                $('<img alt="" />').load(function () { div.empty().append($(this)); resetPos(); })
                    .attr('src', c.content);
                if (c.onLoad) {
                    c.onLoad.apply(self);
                }
                break;
            case 'url':
                div.html('<div class="loading"><img src="/images/loading.gif">加载中...</div>');
                $.ajax({
                    url: c.content,
                    success: function (html) {
                        div.html(html);
                        resetPos();
                        if (c.onLoad) {
                            c.onLoad.apply(self);
                        }
                    },
                    error: function () {
                        div.html('出错啦');
                        if (c.onLoad) {
                            c.onLoad.apply(self);
                        }
                    }
                });
                break;
            case 'iframe':
                var iframe = $('<iframe frameborder="0" src="' + c.content + '" style="border:0px;display: block;" />');
                iframe.load(function () {
                    iframe.width(options.width);
                    iframe.height(options.height - bar.outerHeight());
                    resetPos();
                    if (c.onLoad) {
                        c.onLoad.apply(self);
                    }
                });
                div.append(iframe);
                break;
            case 'text':
                div.html(c.content);
                if (c.onLoad) {
                    c.onLoad.apply(self);
                }
                break;
            default:
                div.html(c);
                if (c.onLoad) {
                    c.onLoad.apply(self);
                }
                break;
        }
    };   /**
    * 显示对话框
    */
    this.show = function () {
        /* 是否显示背景遮罩层 */
        if (options.modal) {
            $('#' + overlayId).show();
        }

        dialog.fadeIn(500, function () {
            if (options.onShow) {
                options.onShow.apply(self);
            }
            isShow = true;
        });
        // 自动关闭
        if (0 != options.time) {
            timeId = setTimeout(this.close, options.time);
        }

        resetPos();
    };

    /**
    * 隐藏对话框。但并不取消窗口内容。
    */
    this.hide = function () {
        if (!isShow) { return; }

        dialog.fadeOut('slow', function () {
            if (options.onHide) {
                options.onHide.apply(self);
            }
        });

        if (options.modal) {
            $('#' + overlayId).fadeOut('slow');
        }

        isShow = false;
    };

    /**
    * 关闭对话框
    *
    * @return void
    */
    this.close = function () {
        dialog.fadeOut('slow', function () {
            if (options.onClose) {
                options.onClose.apply(self);
            }
            $(this).remove();
            isShow = false;
        });
        if (options.modal) {
            $('#' + overlayId).fadeOut('slow', function () {
                $(this).remove();
            });
        }
        clearTimeout(timeId);
    };

    init.call(this);
    this.setContent(options);

    Dialog.__count++;
    Dialog.__zindex++;
}
Dialog.__zindex = 900;
Dialog.__count = 1;
Dialog.version = '1.0';