实现遮罩功能，为何在chrome和firefox下不正常

1、在chrome下是没有随滚动而滚动；
2、在firefox下位置不正确；
3、现在滚动时抖动太大，能否缓冲？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript">
/******************************
*功能：提供js遮罩功能
*开发：walkingp
*主页:http://www.51obj.cn/
*E-mail:[email protected]
*******************************/
(function(){
    var id='lightBox';
var $=function(id){return document.getElementById(id);};
var addEvent=function(obj,type,fn){
if(obj.attachEvent){
obj.attachEvent('on' + type,fn);
}else if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}
}
    var cuteDialog={
        /*遮罩样式*/
        shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
        /*对话框样式*/
        dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666;',
        /*p层新式*/
        pCssText:'text-align:right;',
        showDialog:function(){
            /*遮罩层*/
var id=arguments[0];
            var oDiv=$(id);
            if(!$('shadow'))
            {
                var shadow=document.createElement('div');
                shadow.setAttribute('id','shadow');
                shadow.setAttribute('style',this.shadowCssText);
                
                /*对话框*/
                var dialog=document.createElement('div');
                dialog.setAttribute('id','dialog');
                dialog.setAttribute('style',this.dialogCssText);
                dialog.appendChild(oDiv);
                
                /*p层:存放操作按钮*/
                var p=document.createElement('p');
                p.setAttribute('style',this.pCssText);
                
                var btnClose=document.createElement('button');
                btnClose.innerHTML='关闭';
                btnClose.onclick=function(){
                    var oShadow=$('shadow'),oDialog=$('dialog');
                    shadow.style.display = "none";
                    oDialog.style.display = "none";
                }
                p.appendChild(btnClose);
                
                dialog.appendChild(p);
                document.documentElement.appendChild(shadow);
                document.documentElement.appendChild(dialog);            
            }
            else
            {
                $('shadow').style.display = "block";
                $('dialog').style.display = "block";
            }
            //遮罩层100%高度
            $('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
            $('shadow').style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"

//垂直居中
this.floatVercital('dialog');
        },
        hideDialog:function(){
        
        },
/*始终垂直居中*/
floatVercital:function(id){
var iTop=document.documentElement.scrollTop+(document.documentElement.clientHeight-$(id).offsetHeight)/2;
$('dialog').style.posTop=iTop;
}
    }
    function InitFunc(){
        document.getElementById('openDlg').onclick=function(){
            cuteDialog.showDialog('lightBox');//初始化遮罩
        }
window.onscroll=function(){cuteDialog.floatVercital('dialog');}
    }
    /*初始化*/
    (function AddLoadEvent(func){
        if(window.attachEvent){
            window.attachEvent('onload',func);
            window.attachEvent('onscroll',func);
        }else if(window.addEventListener){
            window.addEventListener('load',func,false);    
            window.addEventListener('scroll',func,false);    
        }else{
            window.onload=func;
        }
     })(InitFunc);
})();
</script>
</head>
<body style="height:1000px;">
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
</body>
</html>

解决方案 »

  1.   

    IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
    NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
      

  2.   

    我测试没发现你说的抖动太大问题，我只测试了FF和IE的，chrome的没测试，不知道你说的是不是在chrome下出现的问题
      

  3.   

    Chrome最新版本肯定是支持随滚动而滚动的
      

  4.   


    var iTop=document.documentElement.scrollTop+(document.documentElement.clientHeight-$(id).offsetHeight)/2;
                $('dialog').style.top=iTop+"px";//posTop不知道这属性是什么，另外你onscroll里，只处理垂直的高度，如果有水平滚动条呢？