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


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 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
农民C键的运用技巧
2020/03/04 星际争霸
用 php 编写的日历
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python实现Restful API的例子
2019/08/31 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python如何使用函数做字典的值
2019/11/30 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
课程设计心得体会
2013/12/28 职场文书
会计人员岗位职责
2014/03/19 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
Python3 类型标注支持操作
2021/06/02 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
MySQL数据库之存储过程 procedure
2022/06/16 MySQL