Question

jsp实现loading效果（遮罩层）

在程序a.jsp中点击提交按钮，将form参数提交到b.jsp。b.jsp从数据库中统计出数据，将其写到EXCEL。
在统计的过程中，时间比较长。
我想在b.jsp中增加遮罩层，提示正在处理（或者使用gif动画），等处理后（即弹出下载提示时）隐藏遮罩层。
请问如何实现？最好给点代码。

Answer 1

jsp中实现loading效果，带遮罩层的实现方法如下：

var MaskUtil = (function(){  

    var $mask,$maskMsg;  

    var defMsg = '正在处理，请稍待。。。';  

    function init(){  

        if(!$mask){  

            $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");  

        }  

        if(!$maskMsg){  

            $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")  

                .appendTo("body").css({'font-size':'12px'});

        }  

          

        $mask.css({width:"100%",height:$(document).height()});  

          

        $maskMsg.css({  

            left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,

        });   

                  

    }  

    return {  

        mask:function(msg){  

            init();  

            $mask.show();  

            $maskMsg.html(msg||defMsg).show();  

        }  

        ,unmask:function(){  

            $mask.hide();  

            $maskMsg.hide();  

        }  

    }  

}());  

需要用到的css样式：

.datagrid-mask-msg {

  position: absolute;

  top: 50%;

  margin-top: -20px;

  padding: 12px 5px 10px 30px;

  width: auto;

  height: 16px;

  border-width: 2px;

  border-style: solid;

  display: none;

}

实现的效果：

Answer 2

z-index:2000; //使遮罩层在其他层之上
opacity:0.5; //透明度,取值范围 0-1

Answer 3

这根jsp没有关系，纯粹用js实现的遮罩层效果，网上一搜一大把。。。