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; 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。