JQ 上传或者加载遮罩层

css代码

.loading-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    filter: alpha(opacity=30);
    display: none;
    background: #ccc;
}
 
.loading-mask-msg {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    padding: 10px 5px 10px 30px;
    width: auto;
    height: 34px;
    line-height: 10px;
    border-width: 2px;
    border-style: solid;
    display: none;
    background: #ffffff url('/images/loading.gif') no-repeat scroll 5px center; // 引入一个gif的动图
    border-color: #96b8e7;
}

jq调用

var showLoading = function (elementTag, message) {
    var msg = message ? message : "加载数据，请稍候...";
    $("<div class=\"loading-mask\"></div>").css({
        display: "block", width: "100%",
        height: $(window).height(),
        'z-index': 1200
    }).appendTo(elementTag);
    $("<div class=\"loading-mask-msg\"></div>")
        .html(msg)
        .appendTo(elementTag).css({ display: "block", left: "30%", top: ($(window).height() - 45) / 2, 'z-index': 1200 });
};
 
var closeLoading = function () {
    $('.loading-mask').remove();
    $('.loading-mask-msg').remove();
};

//打开遮罩层
showLoading("body","正在查询,请稍等...");
//关闭遮罩层
closeLoading();