老生常谈遮罩层 滚动条的问题

今天遇到的问题是，在弹出层后面的 遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层，解决方式是加的css。

js代码

//显示灰色JS遮罩层

function showBg(ct,content){

var bH=$(document).height();

var bW=$("body").width()+16;

var objWH=getObjWh(ct);

$("#fullbg").css({width:bW,height:bH,display:"block"});

var tbT=objWH.split("|")[0]+"px";

var tbL=objWH.split("|")[1]+"px";

$("#dialog").show();

$("#"+ct).css({top:tbT,left:tbL,display:"block"});

$(window).scroll(function(){resetBg()});

$(window).resize(function(){resetBg()});

}

function getObjWh(obj){

var st=document.documentElement.scrollTop;//滚动条距顶部的距离

var sl=document.documentElement.scrollLeft;//滚动条距左边的距离

var ch=document.documentElement.clientHeight;//屏幕的高度

var cw=document.documentElement.clientWidth;//屏幕的宽度

var objH=$("#"+obj).height();//浮动对象的高度

var objW=$("#"+obj).width();//浮动对象的宽度

var objT=Number(st)+(Number(ch)-Number(objH))/2;

var objL=Number(sl)+(Number(cw)-Number(objW))/2;

return objT+"|"+objL;

}

function resetBg(){

var fullbg=$("#fullbg").css("display");

if(fullbg=="block"){

var bH2=$("body").height();

var bW2=$("body").width()+16;

$("#fullbg").css({width:bW2,height:bH2});

var objV=getObjWh("dialog");

var tbT=objV.split("|")[0]+"px";

var tbL=objV.split("|")[1]+"px";

$("#dialog").css({top:tbT,left:tbL});

}

}

//关闭灰色JS遮罩层和操作窗口

function closeBg(){

$("#fullbg").css("display","none");

$("#dialog").css("display","none");

}

css代码

background-color: Gray;

display:none;

z-index:3;

left:0px;

opacity:0.5; top:0; left:0;height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression_r(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); _top: expression_r(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

filter:Alpha(Opacity=30);

opacity: 0.3;

}

dialog {

width:560px;

background:#eee;

display: none;

z-index: 5;

padding:16px;

font-size:12px;

z-index:1000; position:absolute;

}

dialog sup{ color:#f00;}

dialog .close0{ position:relative; top:-24px; left:544px; height:38px; width:40px;}

html代码

<div id="dialog">

<div class="close0"><a href="#" onclick="closeBg();">

<div id="dialog_content">

个人信息

(备注：以下信息我们只用于根据需要给您发送相关服务材料，不会对外泄密，敬请理解)

<table width="555" border="0" cellspacing="1" cellpadding="0" class="yh_table">

   <tr&gt;

    <td width="65" bgcolor="#eeeeee"&gt;<sup>*</sup>用户ID</td&gt;

    <td width="100" bgcolor="#fbfbfb"&gt;<b>{$member.MEMBER_NAME}</b></td&gt;

    <td width="65" bgcolor="#eeeeee"&gt;<sup>*</sup>真实姓名</td&gt;

    <td width="80" bgcolor="#fbfbfb"&gt;<b>{$info.NAMES}</b></td&gt;

    <td width="60" bgcolor="#eeeeee"&gt;性别</td&gt;

    <td bgcolor="#fbfbfb"&gt;<b><php>echo $gender[$info['GENDER']];</php></b></td&gt;

   </tr&gt;

   <tr&gt;

    <td bgcolor="#eeeeee"&gt;<sup>*</sup>手机号码</td&gt;

    <td bgcolor="#fbfbfb"&gt;<b>{$info.TELEPHONE}</b></td&gt;

    <td bgcolor="#eeeeee"&gt;电子邮箱</td&gt;

    <td colspan="3" bgcolor="#fbfbfb"&gt;<b>{$member.EMAIL}</b></td&gt;

   </tr&gt;

   <tr&gt;

    <td colspan="2" bgcolor="#eeeeee"&gt;<sup>*</sup>有效证件（身份证）</td&gt;

    <td colspan="4" bgcolor="#fbfbfb"&gt;<b>{$info.IDS}</b></td&gt;

   </tr&gt;

   <tr&gt;

    <td bgcolor="#eeeeee"&gt;通讯地址</td&gt;

    <td colspan="3" bgcolor="#fbfbfb"&gt;<b>{$info.ADDRESS}</b></td&gt;

    <td bgcolor="#eeeeee"&gt;邮编</td&gt;

    <td bgcolor="#fbfbfb"&gt;<b>{$info.ZIPS}</b></td&gt;

   </tr&gt;

  </table&gt;