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的弹窗,并支持随屏滚动.