jquery封裝了一個簡潔輕巧的可拖動可自訂樣式的純div+css帶遮罩層的仿模態彈出框，jquery模態

jquery封裝了一個簡潔輕巧的可拖動可自訂樣式的純div+css帶遮罩層的仿模態彈出框，jquery模態

        最近封裝上癮，想起以前做的一個輕巧的彈出框，是樣式和指令碼分離的，於是重新封裝了一下，把樣式標籤統一到js裡了。
裡面還有一些問題，但不影響使用，有興趣的同學，可以參考完善下，有好的建議，請不吝賜教。

var PopDialogDefaultConfig = {    hasCover: true,                             //是否帶遮罩層    colorOfCover: "#000",                       //遮罩層顏色    transparencyOfCover: 80,                    //遮罩層透明度（alpha值,opacity值通過換算得到）    borderColor: "blue",                        //邊框標題背景顏色    titleHeight: 50,                            //標題高度    titleFont: '24px "Microsoft Yahei"',        //標題字型    titleFontSize: 24,                          //標題文字大小    titleColor: "white",                        //標題文字顏色    titleFontFamily: "Microsoft Yahei",         //標題字型    contentWidth: 560,                          //內容框寬度    contentHeight: 480,                         //內容框的高度    borderWidth: 2,                             //邊框寬度    backColor: "#EC90F6",                       //背景色    serial: 1,                                  //序號    moveAble: true,                             //是否可以滑鼠拖動    /*      * 設定檔合并      */    Merge: function (newConfig) {        var result = {};        for (var p in this) {            result[p] = this[p];            if (typeof (this[p]) != " function ") {                for (var q in newConfig) {                    if (p == q) {                        result[p] = newConfig[q];                    }                }            }        }        return result;    }};function PopDialog(content, title, popDialogConfig) {    content = content || "這裡什麼都沒有!";    title = title || "提示";    var dialog = new Object;    /*      * 彈出框的預設樣式     */    var config = PopDialogDefaultConfig.Merge(popDialogConfig);    /*      * 根據設定檔和彈出對象，取得彈出框的html串;     */    if (!config.id) {        config.id = "pop" + config.serial;        PopDialogDefaultConfig.serial++;    }    var opacity = (100 - config.transparencyOfCover) / 100;    var width = config.contentWidth + config.borderWidth * 2;    var height = config.contentHeight + config.borderWidth + config.titleHeight;    dialog.Html = (config.hasCover ? '<div id="' + config.id + '_Cover" style="background-color: ' + config.colorOfCover + ';width:100%;height:100%;position:absolute;filter: alpha(opacity=' + config.transparencyOfCover + ');opacity:' + opacity + ';top:0;left:0;"></div>' : "")        + '<div id="' + config.id + '_Dialog" style="background-color:' + config.borderColor + ';position:absolute;width: ' + width + 'px;height: ' + height + 'px;top:calc(50% - ' + height / 2 + 'px);left:calc(50% - ' + width / 2 + 'px);">'        + '    <div id="' + config.id + '_Top" style="height:' + config.titleHeight + 'px;line-height:' + config.titleHeight + 'px;display:block;width:100%;background-color:' + config.borderColor + ';clear:both;vertical-align:middle">'        + '        <span id="' + config.id + '_Title" style="display:inline-block;font-size:' + config.titleFontSize + 'px;padding-left:10px;color:' + config.titleColor + ';">' + (title || "提示") + '</span>'        + '        <a id="' + config.id + '_Close" style="display:block;float:right;text-decoration: none;margin-right:20px;clear:right;color:white;font-size:' + config.titleHeight * 8 / 10 + 'px;" href="#">X</a>'        + '    </div>'        + '    <div id="' + config.id + '_Content" style="background-color:' + config.backColor + ';width:' + config.contentWidth + 'px;height:' + config.contentHeight + 'px;border:' + config.borderWidth + 'px solid ' + config.borderColor + ';">' + content + '</div>'        + '</div>';    dialog.Config = config;    dialog.PopDom = $(dialog.Html);    var top = dialog.PopDom.find("#" + config.id + "_Top");    var parent = $(dialog.PopDom[1]);    var close = dialog.PopDom.find("#" + config.id + "_Close");    /*      * 綁定關閉按鈕事件     */    close.bind("click", function () {        var popdialog = $("#" + config.id + "_Dialog");        if (popdialog && popdialog != undefined) {            popdialog.remove();        }        var popcover = $("#" + config.id + "_Cover");        if (popcover && popcover != undefined) {            popcover.remove();        }        PopDialogDefaultConfig.serial--;    })    /*      * 滑鼠拖動彈出框     */    dialog.x = dialog.y = dialog.mousekey = 0;    if (config.moveAble) {        top.bind("mousedown", function (event) {            dialog.mousekey = true;            top.css("cursor", "move");            dialog.x = event.pageX - parseInt(parent.css("left"));            dialog.y = event.pageY - parseInt(parent.css("top"));            parent.fadeTo(20, 0.5);//點擊後開始拖動並透明        }).mouseout(function () {            dialog.mousekey = false;            top.css("cursor", "default");            parent.fadeTo("fast", 1);//鬆開滑鼠後停止移動並恢複成不透明        });        $(document).mousemove(function (e) {            if (dialog.mousekey) {                parent.css({ top: e.pageY - dialog.y, left: e.pageX - dialog.x });            }        }).mouseup(function () {            dialog.mousekey = false;            top.css("cursor", "default");            parent.fadeTo("fast", 1);//鬆開滑鼠後停止移動並恢複成不透明        });    }    return dialog;};/*  * 拓展jquery對象的方法; */(function ($) {    /*      * 關閉彈出框的方法     * serial： 關閉的彈出框內部對象編號     * Example: $(document.body).ClosePopDialog(1);     */    $.fn.ClosePopDialog = function (serial) {        var popdialog = $("#pop" + serial + "_Dialog");        if (popdialog && popdialog != undefined) {            popdialog.remove();        }        var popcover = $("#pop" + serial + "_Cover");        if (popcover && popcover != undefined) {            popcover.remove();        }    };    /*      * 根據url取得內容並彈出框顯示的方法     * url: 需要顯示的內容的url     * title: 標題     * popDialogConfig： 自訂樣式     * Example: $(document.body).PopDialog("/home/login", "Test Url", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 });     */    $.fn.PopDialogByUrl = function (url, title, popDialogConfig) {        var obj = $(this);        if (url) {            $.ajax({                url: url,                cache: false,                success: function (result) {                    if (result == "[]" || result == "") {                        result = "系統忙，請稍後再試！";                    }                    var pop = new PopDialog(result, title, popDialogConfig);                    obj.append(pop.PopDom);                },                error: function (result) {                    if (result == "[]" || result == "") {                        result = "系統錯誤，請聯絡管理員！";                    }                    var pop = new PopDialog(result, title, popDialogConfig);                    obj.append(pop.PopDom);                }            });        }    };    /*      * 彈出框顯示提供的內容的方法     * content: 需要顯示的內容     * title: 標題     * popDialogConfig： 自訂樣式     * Example: $(document.body).PopDialog("<div>這是一個彈出框的例子！</div>", "Test Content", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 });     */    $.fn.PopDialogByContent = function (content, title, popDialogConfig) {        var pop = new PopDialog(content, title, popDialogConfig);        $(this).append(pop.PopDom);    };})(jQuery);