javascript div 遮罩层封锁整个页面


Posted in Javascript onJuly 10, 2009

具体解决方案如下:
一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。
clientHeight
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
在FF下,offsetHeight是页面具体内容的高度
scrollHeight
在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。

function getPageSize() 
{ 
var body = document.documentElement; 
var bodyOffsetWidth = 0; 
var bodyOffsetHeight = 0; 
var bodyScrollWidth = 0; 
var bodyScrollHeight = 0; 
var pageDimensions = [0,0]; 
pageDimensions[0]=body.clientHeight; 
pageDimensions[1]=body.clientWidth; 
bodyOffsetWidth=body.offsetWidth; 
bodyOffsetHeight=body.offsetHeight; 
bodyScrollWidth=body.scrollWidth; 
bodyScrollHeight=body.scrollHeight; 
if(bodyOffsetHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyOffsetHeight; 
} 
if(bodyOffsetWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyOffsetWidth; 
} 
if(bodyScrollHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyScrollHeight; 
} 
if(bodyScrollWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyScrollWidth; 
} 
return pageDimensions; 
}

三、页面上必须放置一个div,作为遮罩层,下面是这个遮罩层的css样式。
.lockDiv 
{ 
position:absolute; 
left:0; 
top:0; 
height:0; 
width:0; 
border:2 solid red; 
display:none; 
text-align:center; 
background-color:#DBDBDB; 
filter:Alpha(opacity=60); 
}

四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
var sandglassSpan = 1; 
var timeHdl; 
function DisablePage() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
ctrlSandglass.style.display = "block"; 
timeHdl = window.setTimeout(DisablePage,200); 
} 
}

五、如果页面上使用了ASP.net的Validator控件,那么应该使用如下的javascript。
var sandglassSpan = 1; 
var timeHdl; 
function DisablePageHaveValidator() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(false == Page_IsValid) 
{ 
sandglassSpan = 0; 
} 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
ctrlSandglass.style.display = "block"; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
timeHdl = window.setTimeout(DisablePageHaveValidator, 200); 
} 
}

六、DisablePage和DisablePageHaveValidator这两个方法可以在按钮的onclick事件或其它时机调用。
Javascript 相关文章推荐
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 #Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 #Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 #Javascript
jquery Firefox3.5中操作select的问题
Jul 10 #Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
Python实现随机选择元素功能
2017/09/14 Python
python生成九宫格图片
2018/11/19 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
揭牌仪式主持词
2014/03/19 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
大学毕业论文致谢词
2015/05/14 职场文书