码迷,mamicode.com
首页 > Web开发 > 详细

弹出层罩子html(上传照片弹出请等待后面的代码不能修改)

时间:2017-11-15 00:29:21      阅读:27      评论:0      收藏:0      [点我收藏+]

标签:fun   text   com   oct   width   port   over   win   lang   

一,效果

技术分享

二,素材

技术分享

三,代码

 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>

 

弹出层罩子html(上传照片弹出请等待后面的代码不能修改)

标签:fun   text   com   oct   width   port   over   win   lang   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!