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