内容发布更新时间 : 2024/12/27 0:28:54星期一 下面是文章的全部内容请认真阅读。
小编遇到的问题是在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法
今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。 js代码
<script type=\ //显示灰色JS遮罩层 function showBg(ct,content){
var bH=$(document).height(); var bW=$(\ var objWH=getObjWh(ct);
$(\ var tbT=objWH.split(\ var tbL=objWH.split(\ $(\
$(\ $(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=$(\浮动对象的高度 var objW=$(\浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2; var objL=Number(sl)+(Number(cw)-Number(objW))/2; return objT+\ }
function resetBg(){
var fullbg=$(\ if(fullbg==\
var bH2=$(\ var bW2=$(\
$(\ var objV=getObjWh(\ var tbT=objV.split(\ var tbL=objV.split(\ $(\ } }
//关闭灰色JS遮罩层和操作窗口 function closeBg(){
$(\ $(\ }
</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=\ <!-- end JS遮罩层 --> <!-- 对话框 --> <div id=\ <div class=\href=\onclick=\src=\ <div id=\ <h3>个人信息</h3>
<p>(备注:以下信息我们只用于根据需要给您发送相关服务材料,不会对外泄密,敬请理解)</p>
<table width=\ <tr> <td width=\
bgcolor=\用户ID</td> <td width=\bgcolor=\ <td width=\bgcolor=\真实姓名</td> <td width=\bgcolor=\
<td width=\性别</td> <td bgcolor=\$gender[$info['GENDER']];</php></b></td> </tr> <tr>
<td bgcolor=\手机号码</td> <td bgcolor=\
<td bgcolor=\电子邮箱</td> <td colspan=\bgcolor=\ </tr> <tr> <td colspan=\bgcolor=\有效证件(身份证)</td> <td colspan=\bgcolor=\ </tr> <tr>
<td bgcolor=\通讯地址</td> <td colspan=\bgcolor=\
<td bgcolor=\邮编</td> <td bgcolor=\ </tr> </table> </div> </div>
静下心来,循序渐进。
以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了,希望能给
大家一个参考