主要代码(可以直接复制,粘贴到html就能用):
<style>
.over {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
opacity: 0.5;
z-index: 1000;
}
.layout {
display: none;
position: absolute;
top: 40%;
left: 40%;
width: 20%;
height: 20%;
z-index: 1001;
text-align: center;
}
</style>
<script>
//显示Loading...
function showLoading() {
document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}
//关闭Loading...
function hideLoading() {
document.getElementById("over").style.display = "none";
document.getElementById("layout").style.display = "none";
}
</script>
<div id="over" class="over"></div>
<div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>
启动Loading,用:showLoading();
隐藏Loading,用:hideLoading();
实际应用:
//加载报表
function GetDailyReport() {
var startDate = $("#startDate").val();
$("tbody").empty();
$.getJSON("/controller/action",
{ "startDate": startDate },
function (result) {
showLoading();//显示Loading
$.each(result, function (i, field) {
var html = "";
html += "<tr>";
html += "<td>" + field.公司 + "</td>";
html += "<td>" + field.总数量 + "</td>";
html += "<td>" + field.总金额 + "</td>";
html += "</tr>";
$("#tbody").append(html);
});
hideLoading();//隐藏Loading
});
}
大概样式: