遮罩層有滾動條時解決方法

在彈出層後面的 遮罩層,因爲有滾動條,導致滾動條下面不可視區域沒有遮罩層,解決方式是加的css。
<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>
#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;}


<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> 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章