最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到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 = '
查看更多关于jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框_html的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did108185