ajax遮罩层

标签：

遮罩层2种方式：

• 引入jquery插件模式

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

2. 引入这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样式

<style type="text/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 id=‘loading-mask‘></div>
<div id="loading">
    <div class="loading-indicator">
       <img src="/static/images/ajax-loader.gif" width="16" height="11" style="margin-right:8px;float:left;vertical-align:top;"/> 
    </div>
</div>

ajax遮罩层

标签：

原文地址：http://my.oschina.net/u/914655/blog/494562