老生常谈遮罩层 滚动条的问题 下载本文

内容发布更新时间 : 2024/5/18 9:53:21星期一 下面是文章的全部内容请认真阅读。

小编遇到的问题是在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法

今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的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> 

静下心来,循序渐进。

以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了,希望能给

大家一个参考