半透明蒙版加载中

依赖于jQuery。所以先引入jQuery.js文件。

//创建一个js 文件名称自己起。创建拓展函数。
jQuery.extend({

showLoading:function () { 
    if($("#loadingOverlayer").is(":visible")){
        return false;
    }
    $('
').appendTo($('body'));
    $('
').appendTo($("#loadingOverlayer"));
    $('').appendTo($("#loadingView"));
       //根据实际需求。将显示的“加载中”内容添加到loadingView中。我这里就是一个gif的图片。
    $("body,html").css({"overflow":"hidden"});
}

});

jQuery.extend({

hideLoading:function(){
    if(!$("#loadingOverlayer").is(":visible")){
        return false;
    }
    setTimeout(function(){
        $("#loadingOverlayer").remove();
    }, 500);
    //根据实际需求增删改
    //$("body,html").css({"overflow":""});
}

});

//创建css文件。样式自己根据实际需求增删改
html,body {
margin: 0px;
padding: 0px;
height:100%;
}

.loadingOverlayer {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
background:rgba(0,0,0,0.5);
}

div.loadingView {
width: 120px;
height: 120px;
margin: auto;
position: relative;
top: 50%;
text-align: center;
}

div.loadingView img {
width: 50%;
max-width: 50%;
max-height: 50%;
margin-top: -25%;
}

最后在需要的地方使用两个函数即可：
$.showLoading(); 显示半透明遮罩的加载中。
$.hideLoading(); 移除半透明遮罩的加载中。 函数名称自己随意。我用hide 是和show对应的，这个是个人习惯问题，清忽视命名问题。