如何实现自定义遮罩层在页面加载时自动添加？

本文共计484个文字，预计阅读时间需要2分钟。

许多JavaScript框架都包含自己的遮罩层，如LigerUI和Layer。而我们这里自定义即可。思路如下：使用两层div。外层div负责透明背景，内层div使用font-awesome.min.css加载图标（不使用加载中字样）。

很多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><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>

扩展：

想要隐藏使用$(".zzcMain").hide(); 即可

js的alert函数总比jq的show方法先执行（就是说，js会等ajax请求完，它才执行你的show方法，js并不都是顺序执行代码的）。解决方案：show的第二个参数是回调函数，可以把需要先show后面的代码放进去

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);
}
});
});