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


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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
vue.js实例todoList项目
Jul 07 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php数组遍历类与用法示例
2019/05/24 PHP
lib.utf.js
2007/08/21 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
详解Vue如何支持JSX语法
2017/11/10 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
J2EE相关知识面试题
2013/08/26 面试题
慰问信范文
2015/02/14 职场文书
推荐信范文大全
2015/03/27 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript