原创jQuery弹出层插件分享
依赖jquery，兼容IE6\7\8火狐chrom等主流浏览器（绝对原创），不过请求大神帮我提升点效率。
/**
*jQuery弹出层插件
*
*@authorlanhaoooo@163.com
*@since2014-08-23
*/
(function($){
varmethods={
o:{
isIe:!-[1,]||document.documentMode>=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"_"+newDate().getTime();
},
init:function(data,options){
//left和top想要使用的时候请设置center为false，这样的情况下才会生效，如果center=true则该设置不生效#666,#999,#e5dfda,#e5e5e5,#ff8800
vardefaults={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(){
returntrue;
}
};
options=$.extend(defaults,options);
vars=this;
vargenerateId=s.generateId();
if(typeofdata==='object'){
data=datainstanceof$?data:$(data);
if(options.staySame){
data=s.createRender(data,options,generateId).hide();
}else{
data=s.createContainer(data,options,generateId).hide();
}
}elseif(typeofdata==='string'||typeofdata==='number'){
data=$("<divid='"+s.o.dataId+generateId+"'></div>").html(data).appendTo(document.body).hide();
}else{
alert("LayerError:Unsupportedatatype:"+typeofdata);
return;
}
if(options.locked&&!s.hasBgLayer()){
$("<divclass='"+s.o.bgLayer+"'id='"+s.o.bgLayer+"'></div>").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("resizescroll",function(){
s.fixLayer(data);
});
}
if(options.drag){
s.dragLayer(data,options);
}
if(options.shake){
s.shakeLayer(data);
}
vartimeOut;
clearTimeout(timeOut);
if(options.timer>0){
timeOut=window.setTimeout(function(){
$("#"+s.o.replaceClose+generateId).trigger("click");
},options.timer);
}
returndata;
},
createContainer:function(data,options,generateId){
vars=this;
//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
varisHtmlSlice=data.context==undefined?true:false;
varwrapperHtml="<divclass='"+s.o.wrapper+"'id='"+s.o.wrapper+generateId+"'>"
+"<divclass='"+s.o.warpperContent+"'id='"+s.o.warpperContent+generateId+"'>"
+"<aclass='"+s.o.replaceClose+"'id='"+s.o.replaceClose+generateId+"'></a>";
if(options.head){
wrapperHtml+="<h4class='"+s.o.warpperTitle+""+s.o.dragableClass+"'id='"+s.o.warpperTitle+generateId+"'>";
if(options.isClose){
wrapperHtml+="<ahref='javascript:void(0);'title='关闭'class='"+s.o.warpperCloseBtn+"'id='"+s.o.warpperCloseBtn+generateId+"'>×</a>";
}
wrapperHtml+=options.title+"</h4>";
}
wrapperHtml+="<divid='"+s.o.warpperOwnContent+generateId+"'class='"+s.o.warpperOwnContent+"'></div>"
+"</div>"
+"</div>";
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%
varw=$("#"+data.attr('id')).width()||$("#"+s.o.dataId+generateId).width()||s.o.defaultWidth;
//指定了高度
vartempWidth=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{
//如果指定的宽度大于元素本身的宽度，那么需要将元素居中
//让元素始终居中显示
varxPadding=(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),options,generateId);
e.stopPropagation();
});
if(!isHtmlSlice){
//让传入的元素在对话框关闭后可以返回到原来的地方
vardisplay=data.css("display");
varobj=data[0];
varprev=obj.previousSibling;
varnext=obj.nextSibling;
varparent=obj.parentNode;
this["elemBack_"+generateId]=function(){
if(prev&&prev.parentNode){
prev.parentNode.insertBefore(obj,prev.nextSibling);
}elseif(next&&next.parentNode){
next.parentNode.insertBefore(obj,next);
}elseif(parent){
parent.appendChild(obj);
};
data.css({"display":display});
};
}
data.detach();
returns.container;
},
createRender:function(data,options,generateId){
vars=this;
//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
varisHtmlSlice=data.context==undefined?true:false;
s.container=$("<divclass='"+s.o.wrapper+"'style='border:none;'id='"+s.o.wrapper+generateId+"'><aclass='"+s.o.replaceClose+"'id='"+s.o.replaceClose+generateId+"'></a></div>");
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),options,generateId);
e.stopPropagation();
});
if(!isHtmlSlice){
//让传入的元素在对话框关闭后可以返回到原来的地方
vardisplay=data.css("display");
varobj=data[0];
varprev=obj.previousSibling;
varnext=obj.nextSibling;
varparent=obj.parentNode;
s["elemBack_"+generateId]=function(){
if(prev&&prev.parentNode){
prev.parentNode.insertBefore(obj,prev.nextSibling);
}elseif(next&&next.parentNode){
next.parentNode.insertBefore(obj,next);
}elseif(parent){
parent.appendChild(obj);
};
data.css({"display":display});
};
}
data.detach();
returns.container;
},
isLastLayer:function(){
vars=this;
return$("."+s.o.wrapper).length<=0;
},
hasBgLayer:function(){
vars=this;
return$("."+s.o.bgLayer).length>0;
},
close:function(data,options,generateId){
vars=this;
//调用回调函数
varresult=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){
vars=this;
var$wapper=$(obj).parents("div."+s.o.wrapper);
$("."+s.o.replaceClose,$wapper).trigger("click");
},
fixLayer:function(data){
vars=this;
varT=($(window).height()-data.innerHeight())/2+(s.o.ie6?$(document).scrollTop():data.scrollTop());
varL=($(window).width()-data.width())/2+(s.o.ie6?$(document).scrollLeft():data.scrollLeft());
data.css({"left":L,"top":T});
},
dragLayer:function(data,options){
vars=this;
varmove=false;//移动标记
varx=0,y=0;//鼠标离控件左上角的相对位置
varo=data.find("."+s.o.dragableClass).css({"cursor":"move"});
vara=o[0];
o.mousedown(function(e){
//IE9IE10居然把e.button改成0了，艹
varisLeftClick=(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){
varsx=e.pageX-x;//移动时根据鼠标位置计算控件左上角的绝对位置
varsy=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{
returnfalse;
}
});
},
shakeLayer:function(data){
varll=($(window).width()-data.width())/2;
varloop=4;
for(vari=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(){
varmn=$(this).parents("."+methods.o.wrapper);
methods.fixLayer($(mn[0]));
};
})(jQuery);
以上所述就是本文的全部内容了，希望大家能够喜欢。