您的位置:首页 > 其它

ajax遮盖

2015-08-18 15:42 351 查看
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();
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: