小編遇到的問題是在彈出層后面的 遮罩層，因?yàn)橛袧L動(dòng)條，導(dǎo)致滾動(dòng)條下面不可視區(qū)域沒有遮罩層。下面就為大家介紹一下解決方法
今天遇到的問題是，在彈出層后面的 遮罩層，因?yàn)橛袧L動(dòng)條，導(dǎo)致滾動(dòng)條下面不可視區(qū)域沒有遮罩層，解決方式是加的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;//滾動(dòng)條距頂部的距離
var sl=document.documentElement.scrollLeft;//滾動(dòng)條距左邊的距離
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的寬度
var objH=$("#"+obj).height();//浮動(dòng)對(duì)象的高度
var objW=$("#"+obj).width();//浮動(dòng)對(duì)象的寬度
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});
}
}
//關(guān)閉灰色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遮罩層 -->
<!-- 對(duì)話框 -->
<div id="dialog">
<div><a href="#" onclick="closeBg();"><img src="__IMG__/close.png" /></a></div>
<div id="dialog_content">
<h3>個(gè)人信息</h3>
<p>(備注：以下信息我們只用于根據(jù)需要給您發(fā)送相關(guān)服務(wù)材料，不會(huì)對(duì)外泄密，敬請(qǐng)理解)</p>
<table width="555" cellspacing="1" cellpadding="0">
<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>真實(shí)姓名</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>手機(jī)號(hào)碼</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>
靜下心來，循序漸進(jìn)。
以上這篇老生常談?wù)谡謱?滾動(dòng)條的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考