使用原生JS实现弹出层特效
创建遮罩层
_createCover:function(){
varnewMask=document.createElement("div");
newMask.id=this._mark;
newMask.style.position="absolute";
newMask.style.zIndex="100";
_scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width=_scrollWidth+"px";
newMask.style.height=_scrollHeight+"px";
newMask.style.top="0px";
newMask.style.left="0px";
newMask.style.background="#000";
newMask.style.filter="alpha(opacity=50)";
newMask.style.opacity="0.50";
newMask.style.display='none';
document.body.appendChild(newMask);
this._cover=newMask;
}
新建弹出层
_createFloater:function(html){
varnewDiv=document.createElement("div");
newDiv.id=this._id;
newDiv.style.position="absolute";
newDiv.style.zIndex="9999";
newDivWidth=400;
newDivHeight=200;
newDiv.style.width=newDivWidth+"px";
newDiv.style.height=newDivHeight+"px";
newDiv.style.top=(document.body.scrollTop+document.body.clientHeight/2-newDivHeight/2)+"px";
newDiv.style.left=(document.body.scrollLeft+document.body.clientWidth/2-newDivWidth/2)+"px";
newDiv.style.padding="5px";
newDiv.style.display='none';
newDiv.innerHTML=html;
document.body.appendChild(newDiv);
this._floater=newDiv;
}
调节弹层位置
addjustPosition:function(){
this._floater.style.top=(document.body.scrollTop+document.body.clientHeight/2-newDivHeight/2)+"px";
this._floater.style.left=(document.body.scrollLeft+document.body.clientWidth/2-newDivWidth/2)+"px";
}
屏幕滚动事件时调整位置
this._fS=BindAsEventListener(this,this.addjustPosition); addEventHandler(window,"scroll",this._fS); //隐藏后需 removeEventHandler(window,"scroll",this._fS);
完整代码
varFloater=(function(){
varme=Class.create();
me.prototype={
initialize:function(options){
this._fS=BindAsEventListener(this,this.addjustPosition);
this.setOptions(options);
},
setOptions:function(options){
this.options=options||{};
this._id=options.id;
this._mark='mark';
},
show:function(html,options){
options=options||{};
if(!this._cover){
this._createCover();
}
if(!this._floater){
this._createFloater(html);
}
if(options.saveOpt){
this._saveOption=options.saveOpt;
this.bindSaveEvent();
}
this._bindScrollEvent();
this.addjustPosition();
this._floater.style.display='';
this._cover.style.display='';
this.isShow=true;
},
insert:function(html,opts,att){
var_e=document.createElement("div"),_t;
_e.innerHTML=html;
for(varkinopts){
_e[k]=opts[k];
}
_t=this._floater.querySelector('['+att+']');
if(_t){
_t.appendChild(_e);
}
},
getFloater:function(){
if(this._floater){
returnthis._floater;
}
},
//遮罩层
_createCover:function(){
varnewMask=document.createElement("div");
newMask.id=this._mark;
newMask.style.position="absolute";
newMask.style.zIndex="100";
_scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width=_scrollWidth+"px";
newMask.style.height=_scrollHeight+"px";
newMask.style.top="0px";
newMask.style.left="0px";
newMask.style.background="#000";
newMask.style.filter="alpha(opacity=50)";
newMask.style.opacity="0.50";
newMask.style.display='none';
document.body.appendChild(newMask);
this._cover=newMask;
},
//新弹出层
_createFloater:function(html){
varnewDiv=document.createElement("div");
newDiv.id=this._id;
newDiv.style.position="absolute";
newDiv.style.zIndex="9999";
newDivWidth=400;
newDivHeight=200;
newDiv.style.width=newDivWidth+"px";
newDiv.style.height=newDivHeight+"px";
newDiv.style.top=(document.body.scrollTop+document.body.clientHeight/2-newDivHeight/2)+"px";
newDiv.style.left=(document.body.scrollLeft+document.body.clientWidth/2-newDivWidth/2)+"px";
newDiv.style.padding="5px";
newDiv.style.display='none';
newDiv.innerHTML=html;
document.body.appendChild(newDiv);
this._floater=newDiv;
},
//弹出层滚动居中
addjustPosition:function(){
this._floater.style.top=(document.body.scrollTop+document.body.clientHeight/2-newDivHeight/2)+"px";
this._floater.style.left=(document.body.scrollLeft+document.body.clientWidth/2-newDivWidth/2)+"px";
},
bindSaveEvent:function(){
this._saveElem=this._floater.querySelector('['+this._saveOption.elem+']');
if(this._saveElem){
addEventHandler(this._saveElem,"click",this._saveOption.handler);
}
},
_bindScrollEvent:function(){
addEventHandler(window,"scroll",this._fS);
},
hide:function(){
this.isShow=false;
this.destory();
},
destory:function(){
removeEventHandler(window,"scroll",this._fS);
if(this._saveElem){
removeEventHandler(this._saveElem,"click",this._saveOption.handler);
}
if(this._cover){
document.body.removeChild(this._cover);
}
if(this._floater){
document.body.removeChild(this._floater);
}
this._cover=null;
this._floater=null;
}
};
returnme;
})();