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; } 实现的效果: |
|