我刚写了一个用于实现遮罩功能的库,但存在两个问题:
1、库中并没有使用removeChild,但div第二次遮罩就消息了;
2、当页面高度过大,出现滚动条时,遮罩位置显示不正确。请高手指点。
<!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 $=document.getElementById;
var id='lightBox';
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 oDiv=$(arguments[0]);
/*遮罩层*/
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');
document.documentElement.removeChild(oShadow);
document.documentElement.removeChild(oDialog);
}
p.appendChild(btnClose);

dialog.appendChild(p);

document.documentElement.appendChild(shadow);
document.documentElement.appendChild(dialog);
//遮罩层100%高度
var h=document.documentElement.clientHeight + 'px';
    $('shadow').style.height=h;
},
hideDialog:function(){

}
}
function InitFunc(){
$('openDlg').onclick=function(){
cuteDialog.showDialog('lightBox');//初始化遮罩
}
}
/*初始化*/
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent('onload' ,func);
}else if(window.addEventListener){
window.addEventListener('load',func,false);
}else{
window.onload=func;
}
 })(InitFunc);
})();
</script>
</head><body>
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
</body>
</html>

解决方案 »

  1.   

    你明明就是用的删除  你居然说你不是用的removeChild
    效果考虑不周全 没有考虑浏览器缩放的问题<!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 $=document.getElementById;
        var id='lightBox';
        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; top:100px',
            /*p层新式*/
            pCssText:'text-align:right;',
            showDialog:function(){
               var oDiv=$(arguments[0]);
    /*遮罩层*/
    if($('shadow')==null)
    {
    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');
    //document.documentElement.removeChild(oShadow);
    //document.documentElement.removeChild(oDialog);
    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%高度
               // var h=document.documentElement.clientHeight + 'px';
                //$('shadow').style.height=h;
    $('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
    $('shadow').style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"
    },
            hideDialog:function(){
            
            }
        }
        function InitFunc(){
            $('openDlg').onclick=function(){
                cuteDialog.showDialog('lightBox');//初始化遮罩
            }
        }
        /*初始化*/
        (function AddLoadEvent(func){
            if(window.attachEvent){
                window.attachEvent('onload'    ,func);
            }else if(window.addEventListener){
                window.addEventListener('load',func,false);    
            }else{
                window.onload=func;
            }
         })(InitFunc);
    })();
    </script>
    </head><body>
    <button id="openDlg">打开</button>
    <div id="lightBox">这是其中的内容</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    </body>
    </html>
      

  2.   

    你的错误在于
    var oDiv1=$(arguments[0]);
    var oDiv=oDiv1.cloneNode(true);
    当你removeChild(dialog)时因为这时你把oDiv放到dialog里面了,所以再一次获得oDiv时,页面上已经没有这东西了.用上面的,复制一个节点,把它放到dialog里面就可以解决了.
    关于遮住的高度.LS已经说了
      

  3.   

    可以考虑用fixed,参考这里
    不过ie6不支持
      

  4.   


    最近状态不佳啊。
    ……
                  document.documentElement.removeChild(oShadow);
                  document.documentElement.removeChild(oDialog);
    把这个给搞忘了……
      

  5.   

    你的这句代码让我佩服的无体投地:
    $('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";Math.max !!!
      

  6.   

    看看最近很火的这个帖子,遮罩就是人家代码里的一个小功能
    http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html?56921
    而且还兼容很多浏览器