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(); }); });