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


Posted in Javascript onApril 29, 2016

今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的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 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
vue使用element-ui按需引入
May 20 Vue.js
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 #Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 #Javascript
Bootstrap实现下拉菜单效果
Apr 29 #Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
You might like
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jquery选择器简述
2015/08/31 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
python中模块查找的原理与方法详解
2017/08/11 Python
Python 私有函数的实例详解
2017/09/11 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
元旦晚会邀请函
2014/01/27 职场文书
新春联欢会主持词
2014/03/24 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年终个人工作总结
2014/11/07 职场文书
离婚案件答辩状
2015/05/22 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
详解MySQL中的主键与事务
2021/05/27 MySQL
Golang 链表的学习和使用
2022/04/19 Golang