`
遐想英灵
  • 浏览: 10548 次
  • 性别: 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作为...

    layui: layer.open加载窗体时出现遮罩层的解决方法

    遮罩层通常用于在弹窗出现时,覆盖整个页面,使得用户只能与弹出的窗体交互,防止用户误操作其他部分。在某些情况下,这种设计是必要的,但在特定场景下,我们可能希望去除或自定义这个遮罩层。 针对标题和描述中...

    页面加载时遮罩蒙版

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

    js实现遮罩加载效果

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

    Javascript 遮罩层和加载效果代码

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

Global site tag (gtag.js) - Google Analytics