最近封装上瘾，想起以前做的一个轻巧的弹出框，是样式和脚本分离的，于是重新封装了一下，把样式标签统一到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, obj, popdialogconfig) { content = content || 这里什么都没有!; title = title || 提示; obj = obj || $(document.body); var dialog = new object; /* * 弹出框的默认样式 */ var config = popdialogdefaultconfig.merge(popdialogconfig); /* * 根据配置文件和弹出对象，取得弹出框的html串; */ if (!obj.id) { obj.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 = '
' + '' + ' ' + ' ' + (title || 提示) + '' + ' x' + '
' + ' ' + ' ' + content + '
' + '
' + '
'; dialog.config = config; dialog.popdom = $(dialog.html); dialog.x = dialog.x1 = dialog.y = dialog.y1 = dialog.mousekey = 0; /* * 鼠标拖动弹出框 */ if (config.moveable) { var top = dialog.popdom.find(# + obj.id + _top); top.on(mousedown, function (event) { dialog.mousekey = 1; $(this).css(cursor, move); dialog.popdom.find(# + obj.id + _content).css(display, none); }); top.on(mouseup, function (event) { dialog.mousekey = 0; $(this).css(cursor, default); dialog.popdom.find(# + obj.id + _content).css(display, ); }); top.on(mouseout, function (event) { dialog.mousekey = 0; $(this).css(cursor, default); dialog.popdom.find(# + obj.id + _content).css(display, ); }); top.on(mousemove, function (event) { if (dialog.mousekey == 1) { if (dialog.x != 0 || dialog.y != 0) { dialog.x = event.pagex - dialog.x1; dialog.y = event.pagey - dialog.y1; var parent = $(this.parentelement); parent.css(left, (parent.position().left + dialog.x) + px); parent.css(top, (parent.position().top + dialog.y) + px); dialog.x = dialog.x1 = event.pagex; dialog.y = dialog.y1 = event.pagey; } else { dialog.x = dialog.x1 = event.pagex; dialog.y = dialog.y1 = event.pagey; } } else { dialog.x = dialog.x1 = dialog.y = dialog.y1 = 0; } return false; }); } return dialog;};/* * 拓展jquery对象的方法; */(function ($) { /* * 关闭弹出框的方法 */ $.fn.closepopdialog = function () { var obj = this; while (obj) { var popdialog = $(# + this.id + _dialog); if (popdialog) { popdialog.remove(); } var popcover = $(# + this.id + _cover); if (popcover) { popcover.remove(); } obj = obj.parent; } }; /* * 根据url取得内容并弹出框显示的方法 * url: 需要显示的内容的url * popdialogconfig： 自定义样式 * example: $(document.body).popdialog(/home/login, { backcolor: gray, bordercolor: blue, borderwidth: 2, contentwidth: 600, contentheight: 480 }); */ $.fn.popdialogbyurl = function (url, title, popdialogconfig) { var obj = $(this); obj.closepopdialog(); if (url) { $.ajax({ url: url, cache: false, success: function (result) { if (result == [] || result == ) { result = 系统忙，请稍后再试！; } var pop = new popdialog(result, title, this, popdialogconfig); obj.append(pop.popdom); }, error: function (result) { if (result == [] || result == ) { result = 系统错误，请联系管理员！; } var pop = new popdialog(result, title, this, popdialogconfig); obj.append(pop.popdom); } }); } }; /* * 弹出框显示提供的内容的方法 * content: 需要显示的内容 * popdialogconfig： 自定义样式 * example: $(document.body).popdialog(这是一个弹出框的例子！
, { backcolor: gray, bordercolor: blue, borderwidth: 2, contentwidth: 600, contentheight: 480 }); */ $.fn.popdialogbycontent = function (content, title, popdialogconfig) { var obj = $(this); obj.closepopdialog(); var pop = new popdialog(content, title, this, popdialogconfig); obj.append(pop.popdom); };})(jquery);