javascript div 遮罩层封锁整个页面
发布时间:2024-06-09 01:20:09
标签:javascript,div,遮罩层
具体解决方案如下:
一、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事件或其它时机调用。
0
投稿
猜你喜欢
- 报错现象File "<string>", line 1SyntaxError: unexpected EOF
- 问题创建一个二叉树二叉树有限多个节点的集合,这个集合可能是:空集由一个根节点,和两棵互不相交的,分别称作左子树和右子树的二叉树组成创建二叉树
- wxPython是Python语言的一套优秀的GUI图形库。允许Python程序员很方便的创建完整的、功能键全的GUI用户界面。 wxPyt
- 一.基本数据类型整数:int字符串:str(注:\t等于一个tab键)布尔值: bool列表:list (元素的集合)列表用[]元祖:tup
- 开发的时候我都是使用XDebug在本地调试,但是最近加入一些项目中去,环境太复杂了,要在本地搭建一个开发环境真的太麻烦了,那么我们怎么使用x
- 本文实例为大家分享了Vue实现无限加载瀑布流的具体代码,供大家参考,具体内容如下我做的这个瀑布流放在了一个嵌套页面里,就是类似管理后台的ma
- 下表列出了所有Python语言支持的赋值运算符。假设变量a持有10和变量b持有20,则: 例如:试试下面的例子就明白了所有在Pyt
- 项目地址:https://github.com/Henryhaohao/Bilibili_video_download介绍对于单P视频:直接
- 我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑、字幕编辑、分离音频、视频音频混流等。又比如对音频文件的操作:音频
- 如果我们的web应用有大量的异步请求,而这些异步请求是在web服务器认证的情况下,那当我们请求发生在服务器认证失效下,服务器自动302到登录
- 有如下的代码:class p1:def __init__(self,a,b):print("init in p1")se
- 第一种情况是返回的游标是某个具体的表或视图的数据,如:SQL-Code:CREATE OR REPLACE P
- 1、需求分析首先我们打开地图搜索“鸿星尔克”:复制该链接到浏览器,发现这是一个json格式的数据集。
- dict的很多方法跟list有类似的地方,下面一一道来,并且会跟list做一个对比嵌套嵌套在list中也存在,就是元素是list,在dict
- 前言:单个线程时数据操作的只有一个线程,数据的修改也只有一个线程参与,数据相对来说是安全的,多线程时对数据操作的不止一个线程,所以同时对数据
- 本文实例为大家分享了python webp图片格式转化的具体代码,供大家参考,具体内容如下1、将本地的webp图片转换为jpg2、将下载的w
- 蚊子今天下午搭了一主三从的mysql复制,结果所有服务器都配置好后,发现从上报如下的错误 Last_IO_Error: Fatal erro
- 前言提到数据库,你多半会联想到事务,进而还可能想起曾经背得滚瓜乱熟的ACID,不知道你有没有想过这个问题,事务有原子性、隔离性、一致性和持久
- 运行时请在其目录下添加user.txt passwd.txt两文件。否则会报错。程序没有加异常处理。代码比较挫.....#coding:ut
- 概述一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应。因此,为了避免程序在请求时无响应的情况,