一，效果
二，素材
三，代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
<title>自适应居中加载点击遮罩效果实现</title>
<style type="text/css">
#BgDiv1{background-color:#000; position:absolute; z-index:9999; display:none;left:0px; top:0px; width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
.DialogDiv{position:absolute;z-index:99999;}/*配送公告*/
.U-guodu-box { padding:5px 15px; background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9; min-heigh:200px; border-radius:10px;}
.U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}
</style>
<script type="text/javascript" src="https://img.99bill.com/seashell/weixin/js/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('.U-user-login-btn').toggle(function(){
$("#BgDiv1").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
var screenx=$(window).width();
var screeny=$(window).height();
$(".DialogDiv").css("display", "block");
$(".DialogDiv").css("top",yscroll+"px");
var DialogDiv_width=$(".DialogDiv").width();
var DialogDiv_height=$(".DialogDiv").height();
$(".DialogDiv").css("left",(screenx/2-DialogDiv_width/2)+"px")
$(".DialogDiv").css("top",(screeny/2-DialogDiv_height/2)+"px")
$("body").css("overflow","hidden");
},function(){
})
})
</script>
</head>
<body>
<div id="BgDiv1"></div>
<div class="U-login-con">
<button class="U-user-login-btn" >点击</button>
<div class="DialogDiv" style="display:none; ">
<div class="U-guodu-box">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr><td align="center"><img src="${rc.contextPath}/js/css/images/loading.gif"></td></tr>
<tr><td valign="middle" align="center" >提交中，请稍后！</td></tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
