//删除页面遮罩层
function deleteMaskLayer()
{
$("#bgDiv,#loadingDiv").remove();
}
//添加页面遮罩层
///
function addMaskLayer() {
initialize(); //为页面添加遮罩
document.onreadystatechange = subSomething; //监听加载状态改变
}
function initialize() {
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" );
bgObj.setAttribute( 'id', 'bgDiv' );
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#000000";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
bgObj.style.opacity = "0.2";
bgObj.style.left = "0";
bgObj.style.width = bodyWidth + "px";
bgObj.style.height = bodyHeight + "px";
bgObj.style.zIndex = "10000"; //设置它的zindex属性,让这个div在z轴最大,用户点击页面任何东西都不会有反应|
document.body.appendChild(bgObj); //添加遮罩
var loadingObj = document.createElement("div");
loadingObj.setAttribute( 'id', 'loadingDiv' );
loadingObj.style.position = "absolute";
loadingObj.style.top = bodyHeight / 2 - 32 + "px";
loadingObj.style.left = bodyWidth / 2 + "px";
loadingObj.style.background = "url(../wms/webpage/login/css/loading.gif)" ;
loadingObj.style.width = "32px";
loadingObj.style.height = "32px";
loadingObj.style.zIndex = "10000";
document.body.appendChild(loadingObj); //添加loading动画-
}
function subSomething() {
if (document.readyState == "complete" ) //当页面加载完毕移除页面遮罩,移除loading动画-
{
removecloud();
}
}
分享到:
相关推荐
在移动H5领域,用户体验是至关重要的,而Loading加载和页面遮罩层是提升用户体验的两个关键元素。本文将深入探讨如何使用CSS3来实现这两种功能,并解释它们在实际应用场景中的重要性。 首先,让我们来了解什么是...
"CSS3实现Loading加载,页面遮罩层的应用"这一主题,旨在探讨如何利用CSS3来创建吸引人的加载动画以及有效的页面遮罩层,以提升用户的浏览体验。 1. CSS3 Loading加载: - `@keyframes` 规则:这是CSS3中定义动画...
"jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中,如何使用遮罩层来提升用户体验,尤其是在等待页面完全加载时提供一种视觉反馈,让用户知道页面正在处理。 首先,遮罩层通常是一个半透明的div元素,...
总结一下,创建一个在iframe中使用的页面遮罩层,需要以下步骤: 1. 添加一个`iframe`元素,设置其`src`属性指向要嵌入的页面。 2. 创建一个CSS类来定义遮罩层的样式。 3. 编写JavaScript函数以控制遮罩层的显示与...
页面遮罩层(也称为蒙版层)通常是一种覆盖在页面主体内容上的透明或半透明的层,它可以用来突出显示页面的特定部分,或者在加载新内容时给用户一个视觉上的反馈。在Web开发中,实现遮罩层的方法多种多样,但使用...
JSP页面增加遮罩
在互联网应用中,页面遮罩层是一个常见的UI组件,用于在某些操作进行时,防止用户与页面的其他部分进行交互。它的主要作用是提示用户当前页面正在进行某些操作,并保持用户焦点集中在此操作上。本文将详细介绍使用...
页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。
这种效果通常通过JavaScript(JS)配合CSS来实现,其中涉及到的技术包括页面元素禁用、遮罩层创建以及Ajax无刷新加载。下面我们将详细讨论这些知识点。 1. **JS变灰页面**: 在JavaScript中,我们可以使用DOM操作...
在Web开发中,页面遮罩层是一个常用的功能,它可以在进行长时间操作如导出报表时阻止用户对其他页面元素进行操作,从而避免用户在操作未完成时进行其他可能导致错误的操作。GitHub上提供了许多遮罩层插件,但有时候...
"遮罩层"是一种常见的页面加载中显示的技术,它在页面内容加载期间覆盖整个页面,通常以半透明黑色背景的形式出现,以告知用户页面正在加载,同时防止用户误操作。遮罩层的设计应当简洁且不影响页面整体视觉效果,既...
在网页设计和用户体验优化中,记录页面停留时间和实现遮罩层是两个重要的技术点。页面停留时间可以帮助开发者和网站所有者了解用户对特定内容的兴趣程度,而遮罩层则常用于提示、加载或阻挡背景干扰,提升交互体验。...
在网页设计中,遮罩层(Mask Layer)是一种常见的交互元素,用于暂时遮挡页面内容,突出显示某个信息或操作。"js 页面全部遮罩层"这个话题涉及到使用JavaScript(通常借助jQuery库)来实现全屏遮罩效果,包括阻止...
实例可以兼容安卓4.0.4+: 设计结构如下: XML/HTML Code复制内容到... <header u00a0class=header></header> <section u00a0class=page></section> … <footer u00a0class=footer></footer> ...di
其次,“微信遮罩层”是指在微信环境中,当用户触发跳转操作时,为了提供更好的用户体验,会在页面上显示一个半透明的覆盖层,即遮罩层。遮罩层的主要作用是提示用户即将离开微信环境,进入新的网页,并且通常会附带...
在描述中提到的问题是,当页面有滚动条且内容超过视口高度时,遮罩层无法覆盖到屏幕下方的部分,这可能是由于遮罩层的高度没有正确设置或者定位方式不恰当导致的。 实现ASP.NET中的遮罩层,首先需要在页面头部引入...
在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面内容,引导用户注意力或者在加载数据时提供视觉反馈。在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并...
当用户执行某些耗时操作,如文件上传时,遮罩层会显示在页面上,让用户知道后台正在进行处理。遮罩层的设计可以包含简单的加载动画或者具体的操作提示文字。 在“带图片的动态上传文件,js插件,带遮罩层”这个场景...
本文提到的页面遮罩层和阻止页面body滚动是一个常见需求,特别是当开发者需要在用户与页面进行某种交互(如下拉菜单操作)时,不希望页面本身发生滚动而影响用户体验。Bootstrap模态框的实现原理,为我们提供了实现...