loading 加载提示 ······ 透明遮罩居中

2012-05-02 分类：技术文章阅读(1447) 评论(144)

body{

margin: 0;

font-size: 12px;

line-height: 100%;

font-family: Arial, sans-serif;

}

 
.background {

display: block;

width: 100%;

height: 100%;

opacity: 0.4;

filter: alpha(opacity=40);

background:while;

position: absolute;

top: 0;

left: 0;

z-index: 2000;

}

 
.progressBar {

border: solid 2px #86A5AD;

background: white url(progressBar_m.gif) no-repeat 10px 10px;

}

.progressBar {

display: block;

width: 148px;

height: 28px;

position: fixed;

top: 50%;

left: 50%;

margin-left: -74px;

margin-top: -14px;

padding: 10px 10px 10px 50px;

text-align: left;

line-height: 27px;

font-weight: bold;

position: absolute;

z-index: 2001;

}
 
 
<div id="background" class="background" style="display: none; "></div>

<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>
 
 
var ajaxbg = $("#background,#progressBar");

ajaxbg.hide();

$(document).ajaxStart(function () {

    ajaxbg.show();

}).ajaxStop(function () {

    ajaxbg.hide();

});