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

时间：2024-04-18 07:13:29

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

为了把找来的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;

	    width: 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。

相关文章