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


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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jquery 插件开发备注
2010/08/27 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
js实现中文实时时钟
2020/01/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
大四本科生的自我评价
2013/12/30 职场文书
财产公证书样本
2014/04/04 职场文书
鉴定评语大全
2014/05/05 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年德育工作总结
2014/11/20 职场文书