ajax遮罩层 – 星辰的博客

遮罩层2种方式：

- 引入jquery插件模式

1. 下载 showLoading.css , jquery.showLoading.min.js 两个文件

2. 引入这2个文件

1 2	<link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

3. 使用这个组件

function showloading(url,data){

$("body").showLoading();

$.ajax({

url:url,

data:data,

dataType:"json",

success:function(obj){

$("body").hideLoading();

}

});

}

css+div模式

1. css样式

#loading-mask{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

z-index:1000;

background: #666666 url("/static/images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;

opacity: 0.5;

-moz-opacity:0.5;

filter: Alpha(Opacity=50);

}

#loading{

position:absolute;

left:45%;

top:40%;

padding:2px;

z-index:1001;

height:auto;

}

#loading .loading-indicator{

color:#444;

font:bold 20px tahoma,arial,helvetica;

padding:10px;

margin:0;

height:auto;

}

#loading-msg {

font: normal 18px arial,tahoma,sans-serif;

}

</style>

2. html部分

</div>

发表回复 取消回复

发表回复取消回复