遮罩层，和正在加载中

在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();代码。

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