遮罩层，和正在加载中

最新推荐文章于 2022-11-17 15:01:45 发布

fengzheng0603

最新推荐文章于 2022-11-17 15:01:45 发布

阅读量417

点赞数

分类专栏： javascript 文章标签： javascript jquery ViewUI

本文链接：https://blog.csdn.net/fengzheng0603/article/details/84498008

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在body中加入遮罩层和弹出层：

<div id="background" class="background" style="display: none; "></div> 
<div id="progressBar" class="progressBar" style="display: none; ">正在绘图中，请稍等...</div>

写人样式：

.progressBar {
	border: solid 2px #86A5AD;
	background: white url(../images/loading.gif) no-repeat 18px 35px;
}

.progressBar {
	display: block;
	width: 160px;
	height: 58px;
	top: 50%;
	left: 50%;
	margin-left: -74px;
	margin-top: -14px;
	padding: 10px 10px 10px 30px;
	text-align: left;
	line-height: 27px;
	font-weight: bold;
	position: fixed;
	z-index: 2001;
}

.background {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	filter: alpha(opacity=40);
	background:while;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	background-color:#666666;
}

注意这两个div的position都需要时fixed，这样出现滚动条后，才不会有问题。

写脚本：

var ajaxbg = $("#background, #progressBar");
		ajaxbg.hide();
	$(document).ajaxStart(function () {
		ajaxbg.show();
	}).ajaxStop(function () {
		ajaxbg.hide();
	});

在ajax返回的代码会先执行，然后执行ajaxbg.hide();，如果需要先执行ajaxbg.hide();需要在返回函数中先添加ajaxbg.hide();代码。

我用的图片，和运行后的效果在附件里。