自定义遮罩层（加载时添加一个遮罩层）

很多js框架都有自己的遮罩层比如ligerui和layer。但我们这里自定义即可

思路：
两层div。外层div去做透明背景，内层div使用font-awesome.min.css的加载图标（不使用他仅仅自定义“加载中”字样文字也可以）
页面加载后div隐藏display:none，通过js，当点击的时候让其显示

js代码

<script type="text/javascript">
    $(function() {
        $(".zzcMain").css("width", $(document).width());
        $(".zzcMain").css("height", $(document).height());
        $(".zzcMain").css("position", "fixed");
        /*默认隐藏*/
        $(".zzcMain").css("display", "none");
        /*设置为最顶层防止被覆盖*/
        $(".zzcMain").css("z-index", "9999");
        
        var left = $(document).width() / 2 - 300 / 2;
        var top = $(document).height() / 2 - 300;
        $(".zzc").css("margin-left", left);
        $(".zzc").css("margin-top", top);
        $(".zzc").css("position", "fixed");
        
        $(".zzc>span").css("color", "blue");
        $(".zzc>span").css("font-size", "16px");
        $(".zzc>span").css("line-height", "40px");
        
    });
</script>

 

body中添加的html代码：

<div class="zzcMain">
　　<div class="zzc">
      <i class="fa fa-2x fa-spinner fa-spin"></i>&nbsp;<span>正在查询,请稍候...</span>
　　</div>
</div>

持行提交表单时的js代码：

function pFn(tjrq) {
　　$(".zzcMain").show();
　　$("#tjrqForm").submit();
}

引入图标

<link rel="stylesheet" type="text/css" href="${ctx}/styles/common/css/font-awesome/font-awesome.min.css"></link>

 

扩展：

1. 想要隐藏使用 $(".zzcMain").hide(); 即可
2. js的alert函数总比jq的show方法先执行（就是说，js会等ajax请求完，它才执行你的show方法，js并不都是顺序执行代码的）。解决方案：show的第二个参数是回调函数，可以把需要先show后面的代码放进去

  $(".zzcMain").show(0,function(){
                    var url = __ctx + '/platform/fhycgz/fhycgz/initData.htm?myId='+ids;
                    var myId ={myId:ids};
                    $.ajax({
                        url : url,
                        type : 'POST',
                        data : myId,
                        async:true,
                        dataType:'json',
                        success : function(returndata) {
                             setTimeout("alert('"+returndata+"')", 0);
                             window.location.reload(true);
                        },
                        error : function(returndata) {
                             setTimeout("alert('"+returndata+"')", 0);
                             window.location.reload(true);
                        }
                    });
               });