ajax遮盖

 1.HTML中div遮盖
<!-- 加载信息-->
					<div class="framework-loading">
						<div class="framework-loading-div">
							<div class="framework-loading-label">
								数据加载中,请耐心等待...
							</div>
						</div>
					</div>
					<div class="framework-masker"></div><!--此处为遮盖-->

2.对应的CSS样式

.framework-loading{
	position: absolute;
	z-index: 1201;
	background: url(//initLoading.gif//此处为加载图片) repeat-x;
	border:#6593CF 1px solid;
	height:30px;
	top:50%;
	left:50%;
	margin-top:-16px;
	margin-left:-94px;
}
.framework-loading-div{
	font-size: 14px;
	margin:2px;
	color: #1F1F1F;
	height: 24px;
	padding-left:12px;
	border: #A3BAD9 1px solid;
	background: white url(///loading.gif//此处为加载图片) no-repeat 2px 4px;
	
}
.framework-loading-label{
	margin: 4px 7px 1px 8px;
	text-align:center;
	width:240px;
	font-size: 14px;
}
.framework-masker{
	position: absolute;
	z-index: 1200;
	background-color: #ccc;
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);
	opacity: .3;
	width:100%;
	height:100%;
	
}

3.js中调用方法

$(function () {
            
    //Ajax加载提示    
    $(document).ajaxStart(function(){
      $(".framework-loading").show();
      $(".framework-masker").show();
    });
    $(document).ajaxStop(function(){
      $(".framework-loading").hide(); 
      $(".framework-masker").hide();
    });
});

 

 

 
posted @ 2015-08-18 15:42  猪肉炖粉条  阅读(253)  评论(0编辑  收藏  举报