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

 更新时间:2016年04月29日 14:39:19   投稿:jingxian  
小编遇到的问题是在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法

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

静下心来,循序渐进。

以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现下拉列表选择框

    JavaScript实现下拉列表选择框

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js实现时钟定时器

    js实现时钟定时器

    这篇文章主要为大家详细介绍了js实现时钟定时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 通俗易懂讲解Json Web Token (JWT)

    通俗易懂讲解Json Web Token (JWT)

    这篇文章主要介绍了通俗易懂讲解Json Web Token (JWT)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Javascript图像处理—图像形态学(膨胀与腐蚀)

    Javascript图像处理—图像形态学(膨胀与腐蚀)

    上一篇文章,我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数
    2013-01-01
  • JavaScript中常见的数据格式化方式详解

    JavaScript中常见的数据格式化方式详解

    这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-12-12
  • JavaScript判断是否为数字的4种方法及效率比较

    JavaScript判断是否为数字的4种方法及效率比较

    这篇文章主要介绍了JavaScript判断是否为数字的4种方法及效率比较,本文直接给出判断方法实现代码及运行效率效果图,方便大家选择使用,需要的朋友可以参考下
    2015-04-04
  • JS面向对象编程浅析

    JS面向对象编程浅析

    下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程。
    2011-08-08
  • JavaScript中链式调用之研习

    JavaScript中链式调用之研习

    方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量,缺点是它占用了函数的返回值。
    2011-04-04
  • 使用tree shaking 移除无用代码

    使用tree shaking 移除无用代码

    这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 解决FLASH需要点击激活的代码

    解决FLASH需要点击激活的代码

    解决FLASH需要点击激活的代码...
    2006-12-12

最新评论