点击弹出框

function BOX_show_main(id, btn, e, on) {
    this.btn = btn;
    this.e=e;
    this.obj = document.getElementById(id);
    this.scrTop=document.documentElement.scrollTop||document.body.scrollTop;
    var oWidth = parseInt(this.getStyle(this.obj, 'width'));
    var oHeight = parseInt(this.getStyle(this.obj, 'height'));
    var oLeft = parseInt((document.documentElement.clientWidth - oWidth) / 2);
    var oTop = parseInt((document.documentElement.clientHeight - oHeight) / 2+this.scrTop);
    this.start(on).animate(this.bg, {
        height: oHeight,
        width: oWidth,
        left: oLeft,
        top: oTop
    });
}
BOX_show_main.prototype = {
    getStyle: function(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        };
    },
    start: function(on) {
        this.obj.style.position = 'absolute';
        this.obj.style.zIndex = '999';
        this.oDiv = document.createElement('div');
        this.oDiv.id = 'BOX_overlay2';
        this.position(this.oDiv);
        document.body.appendChild(this.oDiv);
        this.bg = document.createElement('div');
        this.bg.className = this.obj.className;
        this.bg.style.width = '0px';
        this.bg.style.height = '0px';
        document.body.appendChild(this.bg);
        this.bg.style.display = 'block';
        this.bg.style.position = 'absolute';
        this.bg.style.left = this.e.clientX+'px';
        this.bg.style.top = this.e.clientY+this.scrTop+'px';
        this.bg.style.zIndex = '998';        
        var _this = this;
        window.onresize = function() {
            _this.position(document.getElementById('BOX_overlay2'));
            _this.obj.style.top = (document.documentElement.clientHeight - _this.obj.offsetHeight) / 2 + 'px';
            _this.obj.style.left = (document.documentElement.clientWidth - _this.obj.offsetWidth) / 2 + 'px';
        };
        if (on) {
            window.onscroll = function() {
                _this.move();
            }
        };
        return this;
    },
    animate: function(obj, json) {
        var _this = this;
        clearInterval(obj.timer);
        var x = 0;
        var opac = true;
        if (typeof this.oDiv.style.opacity == 'undefined') {
            this.oDiv.style.filter = 'alpha(opacity=80)';
            opac = false;
        }
        obj.timer = setInterval(function() {
            var stop = true;
            for (var attr in json) {
                var iCur = 0;
                iCur = parseInt(obj.style[attr]);
                var iSpeed = (json[attr] - iCur) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur != json[attr]) {
                    stop = false;
                }
                obj.style[attr] = iCur + iSpeed + 'px';
            };
            if (opac && x <= 80) {
                _this.oDiv.style.opacity = x / 100;
                x += 10;
            }
            if (stop) {
                clearInterval(obj.timer);
                _this.obj.style.left = json.left + 'px';
                _this.obj.style.top = json.top + 'px';
                _this.obj.style.display = 'block';
                document.body.removeChild(obj);
                _this.oDiv.onclick = function() {
                    _this.end();
                };
                var clo = _this.obj.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)
    },
    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";
    },
    end: function() {
        this.obj.style.display = 'none';
        document.body.removeChild(document.getElementById('BOX_overlay2'));
        document.onkeyup = null;
        window.onresize = null;
        window.onscroll = null;
    },
    move: function() {
        this.obj.style.position = 'fixed';
        window.onscroll = null;
    }
}

function BOX_show2(e,id){
    return new BOX_show_main(id,this,e,false);//true为随屏滚动,false为不随屏滚动
}
/*不支持IE6*/
/*弹窗ID和style属性中禁止写入样式*/
/*关闭按钮样式一律为clo,且一个弹窗只能对应一个*/
/*调用方法必须为BOX_show(event,ID)格式,其中ID为弹出层ID*/

每次点击都会生成一个实例.

由于业务需要已经放弃IE6了,实测点击200多下并没有对浏览器有什么明显的负担.

而且每次一个实例似乎更好理解,就用这个了..