`
遐想英灵
  • 浏览: 10623 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

为页面添加div等待遮罩层

阅读更多
很多时候需要在前台页面提交时加上一个等待图标和遮罩。可以使用下面的例子:

<div id='loading' style='display:none;width:100%;height:120%;text-align:center;padding-top:20%; position: absolute;alpha(opacity=45); opacity:0.45;background-color:#FFFFFF;z-index:1000;'>
		<table style='margin:auto;'>
 			<tr><td><span id='disp'>提交中,请等待...</span></td></tr>
			<tr><td><img src='../某路径/img/loading.gif'></td></tr>
		</table>
	</div>


上面例子中,在页面表层添加一个div,并设置透明度来进行遮罩。
控制该遮罩层可以通过设置style.display属性来控制,如下:

// 遮罩层显示
document.getElementById("loading").style.display="block";

// 遮罩层消失
setTimeout("closeLoading()",2000);
function closeLoading() {
	document.getElementById("loading").style.display="none";
}
分享到:
评论

相关推荐

    页面加载等待遮罩JS.rar

    "页面加载等待遮罩JS.rar"这个压缩包提供了一个纯JavaScript实现的解决方案,它可以帮助我们快速地为网页添加这种功能。 首先,"遮罩层"是一种常见的前端设计技术,它的主要作用是在页面上覆盖一层半透明或全黑的...

    jsp页面加载之遮罩层

    "jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中,如何使用遮罩层来提升用户体验,尤其是在等待页面完全加载时提供一种视觉反馈,让用户知道页面正在处理。 首先,遮罩层通常是一个半透明的div元素,...

    CSS3 实现Loading加载,页面遮罩层的应用

    2. **设置样式**:为遮罩层设置固定宽度和高度,通常是`100%`,并设置`position`为`fixed`,使其始终覆盖整个屏幕。然后,设定`z-index`使其位于其他元素之上,确保可见。为了达到半透明效果,可以设置适当的`...

    使用openDIV.js做遮罩层

    首先,`openDiv.js`的核心概念是创建一个覆盖整个页面的div元素,这个div作为遮罩层,可以通过透明度控制其可见性,以此达到半透明的效果,遮挡背景内容,突出显示特定信息。它支持自定义样式和内容,可以方便地与...

    界面遮罩层例子

    在IT行业中,界面遮罩层是一种常见的用户交互设计元素,用于在用户进行特定操作或等待加载时提供反馈,以防止用户在处理过程中误操作。在这个例子中,我们关注的主题是"界面遮罩层",这涉及到前端开发和用户体验设计...

    CSS3 实现Loading加载,页面遮罩层的应用2017/8/15

    在移动H5领域,CSS3已经成为了网页设计和开发中不可或缺的一部分,...通过熟练掌握和应用这些技术,开发者可以在移动H5页面中创建出既美观又实用的Loading加载效果和页面遮罩层,提升用户在等待内容加载过程中的体验。

    JavaScript弹出遮罩层

    JavaScript弹出遮罩层是一种常见的前端交互设计,用于在网页上创建一个半透明的覆盖层,通常用于显示警告、提示信息或加载等待效果。在这个场景中,我们看到一个经过修改的遮罩层实现,它可以通过链接触发,并指定弹...

    原生css的loading遮罩层效果

    1. **创建遮罩层**:首先,为页面添加一个全屏的遮罩层。通过设置`position: fixed;`使其始终覆盖整个视口,`z-index: 999;`确保其位于所有元素之上。颜色可以设置为半透明,如`background-color: rgba(0, 0, 0, 0.5...

    遮罩层方法(jquery)

    在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面设计元素,它用于在页面上创建一个半透明或全透明的覆盖层,通常用于显示提示信息、加载等待或者阻止用户与页面其他部分的交互。在本例中,我们将探讨如何...

    图片浏览(遮罩层的应用)

    遮罩层是一种常见的设计元素,用于在页面上创建半透明覆盖层,为用户提供一个专注于特定内容的区域,如查看大图或显示更多信息。 首先,我们来看HTML部分。`index.html`文件通常包含页面的基本结构,包括`&lt;head&gt;`和...

    JS弹出遮罩层

    接下来,我们编写JavaScript代码(保存为`main.js`),用于控制遮罩层和模态框的显示与隐藏: ```javascript document.addEventListener('DOMContentLoaded', function () { const mask = document.getElementById...

    div加载等待

    在网页开发中,"div加载等待"是一种常见的用户体验优化策略,尤其在处理大量图片或复杂内容的页面时显得尤为重要。这个话题主要涉及到JavaScript技术,它用于控制页面元素(如div)的显示时机,确保用户在内容完全...

    jquery loading遮罩层插件

    它可以为任何容器添加遮罩层,不仅限于整个页面。这意味着你可以根据需要将加载指示器限制在特定的div或其他HTML元素内。 2. **加载效果多样性**:该插件支持多种类型的加载指示器,包括字体图标、图片和文字。这些...

    jQuery实现的页面遮罩层功能示例【测试可用】

    在页面中,我们预定义了一个用于显示遮罩层的`div`,并使用CSS样式将其设置为覆盖整个视窗,并半透明的黑色背景。 ```html &lt;div class="loading-shade"&gt;&lt;/div&gt; ``` 然后,在CSS样式中,我们定义了遮罩层的样式: ...

    遮罩层实例应用。。。。。

    在这些情况下,遮罩层不仅提供了视觉焦点,还能防止用户在等待过程中误操作其他部分的页面。例如,一个简单的模态框可以这样设计: ```html &lt;div class="modal"&gt; &lt;div class="modal-content"&gt; 模态框标题 这里是...

    数据加载进度条/自定义半透明遮罩层

    3. **交互性**:对于某些情况,可能需要在遮罩层上添加按钮或其他交互元素,允许用户取消或确认操作。 在实际应用中,我们可以利用JavaScript、CSS和HTML来实现这些功能。例如,使用CSS可以创建一个半透明的div作为...

    页面加载时遮罩蒙版

    在网页设计中,当用户等待页面内容加载时,为了提供更好的用户体验,我们常常会在页面上添加一个遮罩蒙版。遮罩蒙版可以是半透明的背景层,它覆盖整个页面,显示一个加载动画或者简单的文字提示,让用户知道页面正在...

    js实现遮罩加载效果

    // 页面加载时显示遮罩层 mask.style.display = 'block'; // 模拟异步加载 setTimeout(function() { // 模拟加载完成,隐藏遮罩层 mask.style.display = 'none'; }, 2000); }); ``` 在实际应用中,你可能会...

    Javascript 遮罩层和加载效果代码

    遮罩层通常用于覆盖整个页面,使得用户在等待时无法进行其他操作,而加载效果则通常表现为动画或者进度条,让用户知道系统正在进行后台处理。 在给出的代码中,我们可以看到两个主要的函数:`showLoad()` 和 `...

    jQuery EasyUI 页面加载等待及页面等待层

    在实现等待提示层时,对于遮罩层的样式设置也十分关键,比如设置遮罩层的宽度和高度为100%,以及设置适当的位置和透明度,确保遮罩层能够覆盖需要等待的页面区域并且不影响其他页面元素的显示。 整个文档通过提供...

Global site tag (gtag.js) - Google Analytics