当前位置: 58彩票app下载 > 58彩票网络 > 正文

遮罩层封锁整个页面

时间:2019-09-21 13:10来源:58彩票网络
具体实施方案如下: 一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。 clientHeight 在IE和FF下,该属性没什么差异,都以指浏览器的可视区域,即除去浏览器的那

具体实施方案如下:
一、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事件或任哪天机调用。

你也许感兴趣的稿子:

  • html 锁定页面(js遮罩层弹出div效果)
  • JS遮罩层效果 包容ie firefox jQuery遮罩层
  • JS+CSS实现弹出全屏灰深藕红透明遮罩效果的章程
  • js弹出div并出示遮罩层
  • js点击按键完结带遮罩层的弹出摄像效果
  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
  • 采纳js完成遮罩以及弹出可活动登入窗口
  • Js制作轻松弹出层DIV在页面居中 中间展现遮罩的具体方法
  • 原生js完结半晶莹剔透遮罩层效果具体代码
  • js达成鼠标移动到图片发生遮罩效果

编辑:58彩票网络 本文来源:遮罩层封锁整个页面

关键词: