使用原生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; })();