带蒙版的提交loading页面实现

废话不多说，直接上代码。

首先是HTML中层的实现：

<!-- loading 层 -->
                <div id="loadingDivBack" style="display: none; position: absolute; top: 0; left: 0; width: 100%; op: 0; background: #eeeeee; opacity: 0.7; filter: alpha(opacity=30); z-index: 100;"></div>
                 <div id="loadingDiv" style="display: none; position: absolute; cursor1: wait; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; z-index: 101; background: #fff url(/img/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family: \'Microsoft YaHei\'; ">正在提交，请等待...</div>

里面的各项参数可以自己调整，需要说明的是两个层都是绝对位置，并且loadingDiv的z-index比蒙版层的要大。

下面是调用这个loading的js代码：

 function showLoading() {
            var _PageHeight = $(document).height();//document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
            //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
            var _LoadingTop = $(document).scrollTop() + document.documentElement.clientHeight / 2;//折叠高度+1/2浏览器高度得到当前视图中间
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
            $("#loadingDivBack").height(_PageHeight);
            $("#loadingDiv").css("left", _LoadingLeft + "px");
            $("#loadingDiv").css("top", _LoadingTop + "px");
            $("#loadingDivBack").show();
            $("#loadingDiv").show();
        }

调用的时候通常是在点击某个submit的button的click事件里面。例如：

 $("#btn_submit").click(function () {
                //弹出模态loading层,让其它按钮不可用
                showLoading();
                $.ajax({...

效果图