transform版点击弹窗

CSS3属性,主要用于弹窗有背景图片.

function BOX_show2(obj,id){
    this.obj=obj;
    this.box=document.getElementById(id);
    var oWidth = parseInt(this.getStyle(this.box, 'width'));
    this.oLeft = parseInt((document.documentElement.clientWidth - oWidth) / 2);
    var _this=this;
    this.obj.onclick=function(ev){
        var e=ev||event;
        _this.start(e).animate(_this.box, {
            transform:100
        });
    }
}
BOX_show2.prototype={
    getStyle: function(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        };
    },
    start:function(e){
        var oHeight = parseInt(this.getStyle(this.box, 'height'));
        this.scrTop=document.documentElement.scrollTop||document.body.scrollTop;
        this.oTop = parseInt((document.documentElement.clientHeight - oHeight) / 2+this.scrTop);
        this.box.style.position = 'absolute';
        this.box.style.left = this.oLeft+'px';
        this.box.style.top = this.oTop+'px';
        this.box.style.zIndex = '998';
        this.css(this.box,'transform','scale(0,0)');
        this.box.style.display = 'block';
        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;
    },
    animate:function(obj,json){
        var _this = this;
        clearInterval(obj.timer);
        var o=0;
        obj.timer = setInterval(function() {
            var iSpeed = (json['transform'] - o) / 5;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            o+=iSpeed;
            var num='scale('+o/100+','+o/100+')';
            _this.css(obj,'transform',num);
            if (o==100) {
                clearInterval(obj.timer);
                var clo = _this.box.getElementsByTagName("a");
                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();
                    }
                };
            };
        },
        20)
    },
    end: function() {
        this.box.style.display = 'none';
        document.onkeyup = null;
    },
}

 

调用方法BOX_show(btn,id);//btn是按钮的DOM元素,id指弹出层ID.

没有设置遮罩层,修正了每次点击生成一个实例.