一，效果
二，素材
三，代码
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
6 <title>自适应居中加载点击遮罩效果实现</title>
7 <style type="text/css">
8 #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);}
9 .DialogDiv{position:absolute;z-index:99999;}/*配送公告*/
10 .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;}
11 .U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}
12 </style>
13 <script type="text/javascript" src="https://img.99bill.com/seashell/weixin/js/jquery.js"></script>
14 <script language="javascript" type="text/javascript">
15 $(function(){
16 $(‘.U-user-login-btn‘).toggle(function(){
17 $("#BgDiv1").css({ display: "block", height: $(document).height() });
18 var yscroll = document.documentElement.scrollTop;
19 var screenx=$(window).width();
20 var screeny=$(window).height();
21 $(".DialogDiv").css("display", "block");
22 $(".DialogDiv").css("top",yscroll+"px");
23 var DialogDiv_width=$(".DialogDiv").width();
24 var DialogDiv_height=$(".DialogDiv").height();
25 $(".DialogDiv").css("left",(screenx/2-DialogDiv_width/2)+"px")
26 $(".DialogDiv").css("top",(screeny/2-DialogDiv_height/2)+"px")
27 $("body").css("overflow","hidden");
28 },function(){
29
30 })
31 })
32 </script>
33 </head>
34 <body>
35 <div id="BgDiv1"></div>
36 <div class="U-login-con">
37 <button class="U-user-login-btn" >点击</button>
38
39 <div class="DialogDiv" style="display:none; ">
40 <div class="U-guodu-box">
41 <div>
42 <table width="100%" cellpadding="0" cellspacing="0" border="0" >
43 <tr><td align="center"><img src="${rc.contextPath}/js/css/images/loading.gif"></td></tr>
44 <tr><td valign="middle" align="center" >提交中，请稍后！</td></tr>
45 </table>
46 </div>
47 </div>
48 </div>
49
50 </div>
51 </body>
52 </html>
时间： 2024-10-06 19:38:24