一個Loading 遮罩效果

一、須要兩個DIV，一個用來遮罩，另外一個用來顯示Loading圖片和文字（初始時它們是隱藏的）

.gdiv_over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f5f5f5;
    opacity: 0.5;
    z-index: 1000;
    border: 0;
}

.gdiv_layout {
    display: none;
    padding: 5px 5px 0 0;
    position: absolute;
    width: 200px;
    height: 45px;
    z-index: 1001;
    text-align: center;
    background-color: #fff;
    vertical-align: middle;
    border: 3px solid #428bca;
}

<div class="gdiv_over"></div>
<div class="gdiv_layout">
　　<img style="width: 30px; height: 30px; border: 0" src="../img/ajaxloading.gif" title="正在處理，請稍後...." />
　　<span style="font-size: 16px">正在處理，請稍後....</span>
</div>

二、須要用的時候，經過JS腳本修改其隱藏爲顯示，而且調整大小和位置

function show_LoadingDIV() {
　　//遮罩
　　$(".gdiv_over").height($(document).height());
　　$(".gdiv_over").show("slow");
　　//計算 Top
　　var dh = $(window).height();
　　var sh = $(window).scrollTop();
　　var lh = $(".gdiv_layout").height();
　　var cha = (dh / 2) + sh - (lh / 2);
　　$(".gdiv_layout").css("top", cha);
　　//計算 Left
　　var dh = $(window).width();
　　var lh = $(".gdiv_layout").width();
　　var cha2 = (dh / 2) - (lh / 2);
　　$(".gdiv_layout").css("left", cha2);
　　//Loading圖片 和 文字
　　$(".gdiv_layout").show("slow");
}
function hide_LoadingDIV() {
　　$(".gdiv_over").hide("slow");
　　$(".gdiv_layout").hide("slow");
}

三、還需註冊下滾動條事件，保持 圖片和文字 DIV 老是居中顯示

$(document).ready(function() {
　　$(window).scroll(function() {
　　　　if ($(".gdiv_over").css("display") != "none") {
　　　　　　//上下滾動   左右省略
　　　　　　var dh = $(window).height();
　　　　　　var sh = $(window).scrollTop();
　　　　　　var lh = $(".gdiv_layout").height();
　　　　　　var cha = (dh / 2) + sh - (lh / 2);
　　　　　　$(".gdiv_layout").css("top", cha);
　　　　}
　　});
});