jquery封装了一个简要轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框
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 ? '<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);