JQuery 数据加载中禁止操作页面

比较常见的做法，但对我而言是第一次做，记录一下。

为了把找来的loading.gif 的背景色设置为透明，还特意装了quicktime。

有学到一些额外的东西。

先将div及img定义好

<body>
     <div id="loadingDiv">
	<img src="loading.gif" style="margin-top:230px;margin-left:700px;" /> 
     </div>
</body>

注意：在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。

css样式(重点)

  	#loadingDiv {
	    background-color:grey;
	    filter: alpha(opacity=50); <!--IE的透明度-->
	    opacity: 0.1;<!--透明度，数值越大越透明，不要调太小，不然gif图片会特别模糊-->
	    display: none;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	     100%;
	    height: 100%;
	    z-index: 100; <!--此处的图层要大于页面-->
	    display:none;
    }

注意：此处用的id样式，页面初始化即启用，且已在样式内将该div设置为不显示。

之后将在js内动态调整它的隐藏与显示属性。当它显示时，将会遮盖住整个body，

用户无法对页面进行任何操作。

javascript代码：

function loadData(){
		//弹出遮盖层
		$("#loadingDiv").fadeTo(200,0.5);
		
	    $.ajax({
            url: 'xx/xx!query.action',
            dataType:"json",
            type: 'POST',
            success: function(data) { 	

			     //此处是加载列表数据的代码
			     
				 //数据加载完毕，则关闭遮盖层
				 $("#loadingDiv").fadeOut(200);
			     
            }
        });
	}

注意：这里用了fadeTo和fadeOut来显示和隐藏div，当然也可以用 show 和 hide。