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

　　小编遇到的问题是在弹出层后面的 遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法
　　今天遇到的问题是，在弹出层后面的 遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层，解决方式是加的css。
　　js代码
　　<script type="text/javascript"> 
　　//显示灰色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");
　　} 
　　</script>
　　css代码
　　#fullbg{ 
　　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="fullbg"></div> 
　　<!-- end JS遮罩层 -->
　　<!-- 对话框 -->
　　<div id="dialog">
　　<div class="close0"><a href="#" onclick="closeBg();"><img src="__IMG__/close.png" /></a></div> 
　　<div id="dialog_content">
　　<h3>个人信息</h3>
　　<p>(备注：以下信息我们只用于根据需要给您发送相关服务材料，不会对外泄密，敬请理解)</p>
　　<table width="555" border="0" cellspacing="1" cellpadding="0" class="yh_table">
　　       <tr>
　　        <td width="65" bgcolor="#eeeeee"><sup>*</sup>用户ID</td>
　　        <td width="100" bgcolor="#fbfbfb"><b>{$member.MEMBER_NAME}</b></td>
　　        <td width="65" bgcolor="#eeeeee"><sup>*</sup>真实姓名</td>
　　        <td width="80" bgcolor="#fbfbfb"><b>{$info.NAMES}</b></td>
　　        <td width="60" bgcolor="#eeeeee">性别</td>
　　        <td bgcolor="#fbfbfb"><b><php>echo $gender[$info['GENDER']];</php></b></td>
　　       </tr>
　　       <tr>
　　        <td bgcolor="#eeeeee"><sup>*</sup>手机号码</td>
　　        <td bgcolor="#fbfbfb"><b>{$info.TELEPHONE}</b></td>
　　        <td bgcolor="#eeeeee">电子邮箱</td>
　　        <td colspan="3" bgcolor="#fbfbfb"><b>{$member.EMAIL}</b></td>
　　       </tr>
　　       <tr>
　　        <td colspan="2" bgcolor="#eeeeee"><sup>*</sup>有效证件（身份证）</td>
　　        <td colspan="4" bgcolor="#fbfbfb"><b>{$info.IDS}</b></td>
　　       </tr>
　　       <tr>
　　        <td bgcolor="#eeeeee">通讯地址</td>
　　        <td colspan="3" bgcolor="#fbfbfb"><b>{$info.ADDRESS}</b></td>
　　        <td bgcolor="#eeeeee">邮编</td>
　　        <td bgcolor="#fbfbfb"><b>{$info.ZIPS}</b></td>
　　       </tr>
　　      </table>
　　</div> 
　　</div> 
　　静下心来，循序渐进。
　　以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了，希望能给大家一个参考