下面代码设定了5秒后取消遮罩，使用时可以修改代码，手动取消
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<title>test</title>
<style type="text/css">
.mask {
position: absolute;
top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002;
left: 0px;
opacity:0.5;
-moz-opacity:0.5;
}
.center-block {
position: absolute;
}
</style>
</head>
<body>
<div id="mask" class="mask"></div>
<div><i id='icon'></i>
</div>
<a href="javascript:;" οnclick="showMask()">点我显示遮罩层</a>
<br />
<a href="javascript:;" οnclick="aaa()">测试遮罩效果</a>
<br />
</body>
<script>
//显示遮罩层
function showMask() {
$("#mask").css("height", $(document).height());
$("#mask").css("width", $(document).width());
$("#mask").show();
$('#icon').addClass('fa fa-circle-o-notch fa-spin');
$('#icon').parent().css("padding-top", $(document).height() / 3);
$('#icon').parent().css("padding-left", $(document).width() / 2);
$('#icon').parent().addClass('center-block');
$("#icon").parent().show();
setTimeout(hideMask, 5000);
}
//隐藏遮罩层
function hideMask() {
$("#mask").hide();
$("#icon").parent().hide();
}
function aaa() {
alert("能触发事件");
}
</script>
</html>下面是实现效果
