js 遮罩层 loading 效果

//调用方法

//关闭事件<button onclick='LayerHide()'>关闭</button>，在loadDiv(text)中，剔除出来

//调用LayerShow(text)，text为参数，可以写入想要写入的提示语

//本方法在调用时会自动生成一个添加到body的div，并且会在调用隐藏遮罩层 LayerHide()时删除div

//封装遮罩层div显示效果

//将其放在页面的div中加载

function loadDiv(text) {
    var div = "<div id='_layer_'> "
            + "<div id='_MaskLayer_' "
            + "style='filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;"
            + "background-color: #000; width: 100%; height: 100%; z-index: 1000; "
            + "position: absolute;"
            + "left: 0; top: 0; overflow: hidden; display: none'>"
            + "</div><div id='_wait_' style='z-index: 1005; position: absolute; "
            + "width:430px;height:218px; display: none'  ><center><h3>"
            + "" + text
            + "<img src='../images/loading.gif' /></h3>"
            + "<button onclick='LayerHide()'>关闭</button></center></div></div>";
    return div;
}

//触发遮罩层

function LayerShow(text) {
   var addDiv = loadDiv(text);
   var element = $("#" + addDiv).appendTo(document.body);
   $(window).resize(Position);
   var deHeight = $(document).height();
   var deWidth = $(document).width();
   Position();
   $("#_MaskLayer_").show();
   $("#_wait_").show();
}

//获取相对位置

function Position() {
    $("#_MaskLayer_").width($(document).width());
    var deHeight = $(window).height();
    var deWidth = $(window).width();
    $("#_wait_").css({
    　　left : (deWidth - $("#_wait_").width()) / 2 + "px",
       top : (deHeight - $("#_wait_").height()) / 2 + "px"
    });
}

//隐藏遮罩层

function LayerHide() {
    $("#_MaskLayer_").hide();
    $("#_wait_").hide();
    del();
}

//清空div,避免产生重复

function del() {
 　　var delDiv = document.getElementById("_layer_");     
     delDiv.parentNode.removeChild(delDiv);
 //删除 
}

本文转自：http://www.cnblogs.com/WangJinYang/archive/2012/10/09/2716965.html