jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾，想起以前做的一个轻巧的弹出框，是样式和脚本分离的，于是重新封装了一下，把样式标签统一到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 ? '

' : "") + ' '; 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(" ", "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);