依赖jquery，兼容IE6\7\8 火狐 chrom 等主流浏览器（绝对原创）， 不过请求大神帮我提升点效率。
= 9,//后面的是判断IE9、IE10的
ie6 : !-[ 1,] && !window.XMLHttpRequest,ie9_10 : document.documentMode >= 9,bgLayer : "layerModel_mask",dataId : "layerModel_main",wrapper : "layerModel_wrapper",warpperContent : "layerModel_content",warpperTitle : "layerModel_title",warpperCloseBtn : "layerModel_closeBtn",warpperOwnContent : "layerModel_ownContent",replaceClose : "replaceClose",dragableClass : "dragable",defaultWidth : 300
},generateId : function(){
return "_" + new Date().getTime();
},init : function(data,options) {
//left和top想要使用的时候请设置center为false，这样的情况下才会生效，如果center = true则该设置不生效 #666,#999,#e5dfda,#e5e5e5,#ff8800
var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:"0.5",title:"系统提示",staySame:false,width:0,height:0,timer:0,bgColor:"#fffaf6",left:350,top:100,head:true,isClose:true,shake:false,close : function(){
return true;
}
};
options = $.extend(defaults,options);
var s = this;
var generateId = s.generateId();
if (typeof data === 'object') {
data = data instanceof $ ? data : $(data);
if(options.staySame) {
data = s.createRender(data,options,generateId).hide();
} else {
data = s.createContainer(data,generateId).hide();
}
} else if (typeof data === 'string' || typeof data === 'number') {
data = $("").html(data).appendTo(document.body).hide();
} else {
alert("Layer Error : Unsupporte data type :" + typeof data);
return;
}
if (options.locked && !s.hasBgLayer()) {
$("").appendTo(document.body).css({"background" : options.bgColor,"opacity" : options.opacity});
}
data.css({"position" : options.fixed ? s.o.ie6 ? "absolute" : "fixed" : "absolute","z-index" : options.zIndex,"left" : options.left,"top" : options.top}).show();
if (options.center) {
s.fixLayer(data);
$(window).bind("resize scroll",function() {
s.fixLayer(data);
});
}
if (options.drag) {
s.dragLayer(data,options);
}
if(options.shake) {
s.shakeLayer(data);
}
var timeOut;
clearTimeout(timeOut);
if(options.timer > 0){
timeOut = window.setTimeout(function(){
$("#"+s.o.replaceClose + generateId).trigger("click");
},options.timer);
}
return data;
},createContainer : function(data,generateId) {
var s = this;
//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
var isHtmlSlice = data.context == undefined ? true : false;
var wrapperHtml = "
"
+ "
";
s.container = $(wrapperHtml);
s.container.appendTo(document.body);
data.clone(true).appendTo("#"+s.o.warpperOwnContent + generateId).show().attr('id',data.attr('id') || s.o.dataId + generateId);
//div默认宽度为100%，所以建议将所有弹出的元素设置宽度，否则弹出层宽度为100%
var w = $("#"+data.attr('id')).width() || $("#"+s.o.dataId + generateId).width() || s.o.defaultWidth;
//指定了高度
var tempWidth = w;
if(options.height > 0 ) {
if(options.width > 0){
tempWidth = options.width;
if(options.width <= w){
$("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});
} else {
//如果指定的宽度大于元素本身的宽度，那么需要将元素居中
//让元素始终居中显示
var xPadding = (options.width - w) / 2 + 8;
$("#"+s.o.warpperOwnContent + generateId).css({"padding" : "4px " + xPadding + "px"});
}
}
s.container.width(tempWidth + 32);
$("#"+s.o.warpperContent + generateId).width(tempWidth + 30);
$("#"+s.o.warpperOwnContent + generateId).css({"height":options.height,"overflow-y":"auto"});
} else {
if(options.width > 0) {
tempWidth = options.width;
if(options.width <= w) {
$("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});
}
}
s.container.width(tempWidth + 22);
$("#"+s.o.warpperContent + generateId).width(tempWidth + 20);
}
$("#"+s.o.warpperCloseBtn + generateId).click(function(e) {
$("#"+s.o.replaceClose + generateId).trigger("click");
});
$("#"+s.o.replaceClose + generateId).click(function(e) {
s.close($("#"+s.o.wrapper + generateId),generateId);
e.stopPropagation();
});
if(!isHtmlSlice){
// 让传入的元素在对话框关闭后可以返回到原来的地方
var display = data.css("display");
var obj = data[0];
var prev = obj.prevIoUsSibling;
var next = obj.nextSibling;
var parent = obj.parentNode;
this["elemBack_" + generateId] = function(){
if (prev && prev.parentNode) {
prev.parentNode.insertBefore(obj,prev.nextSibling);
} else if (next && next.parentNode) {
next.parentNode.insertBefore(obj,next);
} else if (parent) {
parent.appendChild(obj);
};
data.css({"display" : display});
};
}
data.detach();
return s.container;
},createRender : function(data,generateId){
var s = this;
//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
var isHtmlSlice = data.context == undefined ? true : false;
s.container = $("");
s.container.appendTo(document.body);
data.clone(true).appendTo(s.container).show().attr('id',data.attr('id') || s.o.dataId + generateId);
$("#"+s.o.replaceClose + generateId).click(function(e) {
s.close($("#"+s.o.wrapper + generateId),generateId);
e.stopPropagation();
});
if(!isHtmlSlice){
// 让传入的元素在对话框关闭后可以返回到原来的地方
var display = data.css("display");
var obj = data[0];
var prev = obj.prevIoUsSibling;
var next = obj.nextSibling;
var parent = obj.parentNode;
s["elemBack_" + generateId] = function(){
if (prev && prev.parentNode) {
prev.parentNode.insertBefore(obj,isLastLayer : function(){
var s = this;
return $("." + s.o.wrapper).length <= 0;
},hasBgLayer : function(){
var s = this;
return $("." + s.o.bgLayer).length > 0;
},close : function(data,generateId) {
var s = this;
//调用回调函数
var result = options.close();
if(result == undefined || result){
data.remove();
if(s.isLastLayer()) {
$("#" + s.o.bgLayer).remove();
}
}
if (s["elemBack_" + generateId]) {
s["elemBack_" + generateId]();
};
},closeLayer : function(obj){
var s = this;
var $wapper = $(obj).parents("div."+s.o.wrapper);
$("."+s.o.replaceClose,$wapper).trigger("click");
},fixLayer : function(data) {
var s = this;
var T = ($(window).height() - data.innerHeight()) / 2 + (s.o.ie6 ? $(document).scrollTop() : data.scrollTop());
var L = ($(window).width() - data.width()) / 2 + (s.o.ie6 ? $(document).scrollLeft() : data.scrollLeft());
data.css({"left" : L,"top" : T});
},dragLayer : function(data,options) {
var s = this;
var move = false;// 移动标记
var x = 0,y = 0;// 鼠标离控件左上角的相对位置
var o = data.find("." + s.o.dragableClass).css({"cursor" : "move"});
var a = o[0];
o.mousedown(function(e) {
//IE9 IE10居然把e.button改成0了，艹
var isLeftClick = (s.o.isIe && e.button == 1) || (!s.o.isIe && e.button == 0) || (s.o.ie9_10 && e.button == 0);
if (isLeftClick) {
data.fadeTo(20,0.25);// 点击后开始拖动并透明显示
s.o.isIe ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
move = true;
x = e.pageX - parseInt(data.css("left"));
y = e.pageY - parseInt(data.css("top"));
$(document).mousemove(function(e) {
if (move) {
var sx = e.pageX - x;// 移动时根据鼠标位置计算控件左上角的绝对位置
var sy = e.pageY - y;
data.css({"top" : sy,"left" : sx});
}
}).mouseup(function() {
data.fadeTo("fast",1);// 松开鼠标后停止移动并恢复成不透明
move = false;
x = 0;
y = 0;
s.o.isIe ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
});
} else {
return false;
}
});
},shakeLayer : function(data){
var ll = ($(window).width() - data.width()) / 2;
var loop = 4;
for(var i=1; i<=loop; i++){
data.animate({left:ll - (loop * 10 - 10 * i)},50);
data.animate({left:ll + 2*(loop * 10 - 10 * i)},50);
}
}
};
$.fn.layerModel = function(options) {
methods.init(this,options);
};
$.fn.close = function() {
methods.closeLayer(this);
};
$.fn.fix = function() {
var mn = $(this).parents("." + methods.o.wrapper);
methods.fixLayer($(mn[0]));
};
})(jQuery);
"
+ "";
if(options.head){
wrapperHtml+= "
"
+ ""; if(options.isClose){ wrapperHtml+= "×"; } wrapperHtml+= options.title + "
"; } wrapperHtml+= "" + "以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/jquery/54976.html