老生常谈遮罩层 滚动条的问题
更新时间:2016年5月4日 10:00 点击:1791
今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的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>
静下心来,循序渐进。
以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
上一篇: js简单倒计时实现代码
下一篇: Bootstrap进度条组件知识详解
相关文章
- 本篇文章主要介绍了vue实现一个移动端屏蔽滑动的遮罩层实例,具有一定的参考价值,有兴趣的可以了解一下 ...2017-06-15
- 这篇文章主要介绍了jQuery点击按钮弹出遮罩层且内容居中特效,需要的朋友可以参考下...2015-12-16
- 在开发中经常遇到去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条,大家基于js是怎么实现的呢?下面小编通过本文给大家详细介绍下,对js iframe滚动条相关知识感兴趣的朋友一起学习吧...2016-11-22
- 这篇文章主要介绍了js点击按钮实现带遮罩层的弹出视频效果,需要的朋友可以参考下...2015-12-21
- 下面小编就为大家带来一篇DIV随滚动条滚动而滚动实现代码【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-04-16
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题,感兴趣的小伙伴们可以参考一下...2016-04-18- 这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下...2016-05-14
- 这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06
- 项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧...2016-01-14
- 这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法,文中介绍了两种检测滚动条到达底部的状况,感兴趣的小伙伴们可以参考一下...2015-12-17
- 这篇文章主要介绍了jquery实现简单的遮罩层相关代码,内容很丰富,教大家实现遮罩层效果,感兴趣的小伙伴们可以参考一下...2016-01-12
- 这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下...2016-02-26
- 这篇文章主要介绍了jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)的关键代码,非常不错,代码简单易懂,需要的朋友可以参考下...2016-09-01
- 下面小编就为大家带来一篇一个用jquery写的判断div滚动条到底部的方法【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-05-04
- 下面小编就为大家带来一篇弹出遮罩层后禁止滚动效果【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-05-04
- 本文主要介绍了页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置的两种方案,需要的朋友可以看下...2017-01-09
- 这篇文章主要介绍了js实现滚动条滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,需要的朋友可以参考下...2015-12-21
- 小编遇到的问题是在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法...2016-05-04
- 这篇文章主要介绍了js实现滚动条滚动到某个位置便自动定位某个tr的相关资料,感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了jQuery遮罩层效果,结合实例形式较为详细的分析了jQuery实现遮罩层的原理与相关技术细节,需要的朋友可以参考下...2016-01-15