遮罩 | 遮罩

一个简单的遮罩
 1 <style>
 2     #loading{
 3         display:none;
 4         width:100%;
 5         margin:0 auto;
 6         position:fixed;
 7         left:0;
 8         top:0;
 9         bottom: 0;
10         z-index: 111;
11         background:#C7C7C7;
12         opacity: 0.8;
13     }
14     #loading img{
15         position:absolute;
16         top:50%;
17         left:50%;
18         transform: translate(-50%, -50%);
19     }
20 </style>
21 <body>
22     <div id='loading'>
23         <img src="http://api.liumeijingguan.com/Public/Imgs/5-121204193R5-50.gif" alt="上传中">
24     </div>
25
26     <div onclick="xian()">点击显示</div>
27 </body>
28 </html>
29 <script src="jquery-1.8.1.min.js"></script>
30 <script>
31     function xian(){
32         $("#loading").show();
33         setTimeout(function(){
34             $("#loading").hide();
35         },3000)
36     }
37
38 </script>