transform版点击弹窗2
新增遮罩层,弹回动画,支持滚动,优化
function BOX_show2(obj,id,on){ this.obj=obj; this.box=document.getElementById(id); this.oWidth = parseInt(this.getStyle(this.box, 'width')); this.oHeight = parseInt(this.getStyle(this.box, 'height')); var _this=this; this.obj.onclick=function(ev){ var e=ev||event; _this.start(e,on).animate(_this.box, { transform:100, left:parseInt(_this.oLeft-_this.x), top:parseInt(_this.oTop-_this.y) }); } } BOX_show2.prototype={ getStyle: function(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }; }, start:function(e,on){ var _this=this; this.oDiv = document.createElement('div'); this.oDiv.id = 'BOX_overlay2'; this.position(this.oDiv); document.body.appendChild(this.oDiv); this.scrTop=document.documentElement.scrollTop||document.body.scrollTop; this.oLeft = parseInt((document.documentElement.clientWidth - this.oWidth) / 2); this.oTop = parseInt((document.documentElement.clientHeight - this.oHeight) / 2+this.scrTop); this.x=parseInt(e.clientX-this.oWidth/2); this.y=parseInt(e.clientY-this.oHeight/2)+this.scrTop; this.box.style.position = 'absolute'; this.box.style.left = this.x+'px'; this.box.style.top = this.y+'px'; this.box.style.zIndex = '998'; this.css(this.box,'transform','scale(0,0)'); this.box.style.display = 'block'; this.subTop=0;//预防弹窗显示时滚动 window.onresize = function() { _this.position(_this.oDiv); _this.box.style.top = (document.documentElement.clientHeight - _this.oWidth) / 2 +this.scrTop+ 'px'; _this.box.style.left = (document.documentElement.clientWidth - _this.oHeight) / 2 + 'px'; }; if (on) { window.onscroll = function() { _this.move(); } }; return this; }, css:function(obj,style,attr){ obj.style[style]=attr; style=style.replace(/\b(\w)|\s(\w)/g, function(m){return m.toUpperCase();}); obj.style['Moz'+style]=attr; obj.style['Webkit'+style]=attr; obj.style['O'+style]=attr; }, animate:function(obj,json){ var _this = this; clearInterval(obj.timer); var value={}; for(var attr in json){ value[attr]=0; }; var docstyle=document.documentElement.style; var ie=true; if('transform' in docstyle||'OTransform' in docstyle||'WebkitTransform' in docstyle||'MozTransform' in docstyle){ ie=false; } if(ie){ if(json['transform']>0){ this.box.style.display = 'block'; this.bind(); }else{ this.box.style.display = 'none'; } this.box.style.left = this.oLeft+'px'; this.box.style.top = this.oTop+'px'; }else{ obj.timer = setInterval(function() { var stop=true; for(var attr in json){ var iSpeed=0; iSpeed = (json[attr] - value[attr]) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); value[attr]+=iSpeed; var o; if(attr=='transform'){ if(value['transform']<0){ o=value['transform']+100; }else{ o=value['transform']; } var num='scale('+o/100+','+o/100+')'; _this.css(obj,'transform',num); }else{ _this.box.style[attr]=parseInt(_this.box.style[attr])+iSpeed+'px'; } if(value[attr]!=json[attr]){ stop=false; } } if (stop) { clearInterval(obj.timer); _this.bind(); }; }, 20); } }, bind:function(){ var _this=this; var clo = this.box.getElementsByTagName("a"); this.oDiv.ondblclick = function() { _this.end(); }; for (var i = 0; i < clo.length; i++) { if (clo[i].className == 'clo') { clo = clo[i]; break; } }; clo.onclick = function() { _this.end(); }; document.onkeyup = function(event) { var evt = window.event || event; var code = evt.keyCode ? evt.keyCode: evt.which; if (code == 27) { _this.end(); } }; }, end: function() { this.animate(this.box, { transform:-100, left:parseInt(this.x-this.oLeft), top:parseInt(this.y-this.oTop)-this.subTop }) document.body.removeChild(this.oDiv); document.onkeyup = null; window.onresize = null; window.onscroll = null; }, position: function(obj) { var hei = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; obj.style.height = hei + "px"; obj.style.width = document.documentElement.clientWidth + "px"; }, move: function() { this.box.style.position = 'fixed'; this.box.style.top=(document.documentElement.clientHeight - this.oHeight) / 2+'px'; this.subTop=(document.documentElement.scrollTop||document.body.scrollTop)-this.scrTop; //console.log(this.subTop) } }
不兼容IE6.
调用方法new BOX_show2(dom,id,boolean);//dom:按钮dom,id:弹窗ID,boolean:是否随屏滚动.
//例:var btn=document.getElementById('a');
new BOX_show2(btn,'id',true);//点击ID为a的元素打开ID为id的弹窗,并支持随屏滚动.