最近封装上瘾，想起以前做的一个轻巧的弹出框，是样式和脚本分离的，于是重新封装了一下，把样式标签统一到js里了。
里面还有一些问题，但不影响使用，有兴趣的同学，可以参考完善下，有好的建议，请不吝赐教。
if (typeof jQuery === 'undefined') { throw 'no jquery'; }
(function () {
window.PopDialog = window.PopDialog || {
defaultConfig:{
hasCover: true, //是否带遮罩层
colorOfCover: "#000", //遮罩层颜色
opacity: 20, //遮罩层透明度
borderColor: "blue", //边框标题背景颜色
titleHeight: 30, //标题高度
titleFont: '18px "Microsoft Yahei"', //标题字体
titleFontSize: 18, //标题文字大小
titleColor: "white", //标题文字颜色
titleFontFamily: "Microsoft Yahei", //标题字体
contentWidth: 560, //内容框宽度
contentHeight: 480, //内容框的高度
borderWidth: 2, //边框宽度
backColor: "#EC90F6", //背景色
seq: 0, //序列号
moveAble: true, //是否可以鼠标拖动
callBack: null, //回调方法
},
mergeJsonObj: function (s, o) {
var r = {};
for (var p in s) {
r[p] = s[p];
}
for (var q in o) {
r[q] = o[q];
}
return r;
},
hToInt: function (c, n) {
var s = c.toUpperCase(),
i = s == 'A' ? 10
: s == 'B' ? 11
: s == 'C' ? 12
: s == 'D' ? 13
: s == 'E' ? 14
: s == 'F' ? 15
: parseInt(s, 10);
return n == 0 ? i : i * 16;
},
getRGB: function (c) {
var rgb = {}, c = c.replace('#', '');
if (c.length == 3) {
rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(0, 1), 0);
rgb.g = this.hToInt(c.substr(1, 1), 1) + this.hToInt(c.substr(1, 1), 0);
rgb.b = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(2, 1), 0);
} else {
rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(1, 1), 0);
rgb.g = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(3, 1), 0);
rgb.b = this.hToInt(c.substr(4, 1), 1) + this.hToInt(c.substr(5, 1), 0);
}
return rgb;
},
show: function (containner, content, title, config) {
content = content || "这里什么都没有!";
title = title || "提示";
var dialog = new Object,
c = dialog.config = this.mergeJsonObj(this.defaultConfig, config);
c.id = 'pop_' + c.seq++;
containner.attr("popIdx", c.id);
var opacity = c.opacity / 100,
rgb = this.getRGB(c.colorOfCover),
width = c.contentWidth + c.borderWidth * 2,
height = c.contentHeight + c.borderWidth + c.titleHeight;
dialog.cover = $('<div id="' + c.id + '_cover" style="background-color: rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ');100%;height:100%;position:absolute;top:0;left:0;"z-index:99999></div>');
dialog.frame = $('<div id="' + c.id + '_frame" style="background-color:' + c.borderColor + ';position:fixed; ' + width + 'px;height: ' + height + 'px;top:calc(50% - ' + height / 2 + 'px);left:calc(50% - ' + width / 2 + 'px);"></div>');
dialog.top = $('<div id="' + c.id + '_top" style="background-color:' + c.borderColor + ';height:' + c.titleHeight + 'px;line-height:' + c.titleHeight + 'px;display:block;100%;clear:both;vertical-align:middle"></div>').appendTo(dialog.frame);
dialog.title = $('<span id="' + c.id + '_title" style="display:inline-block;font-size:' + c.titleFontSize + 'px;padding-left:10px;color:' + c.titleColor + ';">' + (title || "提示") + '</span>').appendTo(dialog.top);
dialog.close = $('<a id="' + c.id + '_close" style="display:block;float:right;text-decoration: none;margin-right:10px;clear:right;color:white;font-size:' + c.titleHeight * 8 / 10 + 'px;" href="#">X</a>').appendTo(dialog.top);
dialog.body = $('<div id="' + c.id + '_content" style="background-color:' + c.backColor + ';' + c.contentWidth + 'px;height:' + c.contentHeight + 'px;margin-left:' + c.borderWidth + 'px;">' + content + '</div>').appendTo(dialog.frame);
if (c.hasCover) {
dialog.PopDom = dialog.cover;
dialog.frame.appendTo(dialog.cover);
dialog.PopDom.appendTo(containner);
} else {
dialog.PopDom = dialog.frame.appendTo(containner);
}
dialog.close.on("click", function () {
var str = $(this).attr('id').replace('close', '');
$('[id^="' + str + '"]').remove();
})
dialog.x = dialog.y = dialog.mousekey = 0;
if (c.moveAble) {
dialog.top.on("mousedown", function (event) {
dialog.mousekey = true;
dialog.top.css("cursor", "move");
dialog.x = event.pageX - parseInt(dialog.frame.css("left"), 10);
dialog.y = event.pageY - parseInt(dialog.frame.css("top"), 10);
dialog.frame.fadeTo(20, 0.5);//点击后开始拖动并透明
}).on('mouseout', function () {
dialog.mousekey = false;
dialog.top.css("cursor", "default");
dialog.frame.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
$(document).on('mousemove', function (e) {
if (dialog.mousekey) {
dialog.frame.css({ top: e.pageY - dialog.y, left: e.pageX - dialog.x });
}
}).on('mouseup', function () {
dialog.mousekey = false;
dialog.top.css("cursor", "default");
dialog.frame.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
}
return dialog;
}
}
/*
* 关闭弹出框的方法
* serial： 关闭的弹出框内部对象编号
* Example: $(document.body).ClosePopDialog(1);
*/
$.fn.ClosePopDialog = function () {
var id = $(this).attr('popIdx');
$('[id^="' + id + '_"]').remove();
};
/*
* 根据url取得内容并弹出框显示的方法
* url: 需要显示的内容的url
* title: 标题
* popDialogConfig： 自定义样式
* Example: $(document.body).PopDialogByUrl("/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 = "系统忙，请稍后再试！";
}
return PopDialog.show(obj, result, title, popDialogConfig);
},
error: function (result) {
if (result == "[]" || result == "") {
result = "系统错误，请联系管理员！";
}
return PopDialog.show(obj, result, title, popDialogConfig);
}
});
}
};
/*
* 弹出框显示提供的内容的方法
* content: 需要显示的内容
* title: 标题
* popDialogConfig： 自定义样式
* Example: $(document.body).PopDialogByContent("<div>这是一个弹出框的例子！</div>", "Test Content", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 });
*/
$.fn.PopDialogByContent = function (content, title, popDialogConfig) {
return PopDialog.show($(this), content, title, popDialogConfig);
};
})(jQuery);