一个Loading 遮罩效果

1、需要两个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>

2、需要用的时候，通过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");
}

3、还需注册下滚动条事件，保持 图片和文字 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);
　　　　}
　　});
});