模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9         }
10         .back{
11             height: 1200px;
12             width: 100%;
13             background-color: cornsilk;
14         }
15         .shade{
16             position: fixed;
17             top: 0;
18             bottom: 0;
19             left: 0;
20             right: 0;
21             background-color: whitesmoke;
22             opacity: 0.4;
23             display: none;
24         }
25         .model{
26             position: fixed;
27             width: 400px;
28             height: 400px;
29             background-color: aquamarine;
30             /*z-index: 1000;*/
31             top: 50%;
32             left:50%;
33             margin-left:-250px;
34             margin-top: -200px;
35             text-align: center;
36 
37         }
38         .con{
39             margin-top: 100px;
40 
41         }
42         .hide{
43             display: none;
44         }
45     </style>
46 </head>
47 <body>
48 <div class="back">
49   <button onclick="start()">start</button>
50     <h1>11111111111</h1>
51     <img src="000.jpg" alt="">
52 </div>
53 <div class="shade hide"></div>
54 <div class="model hide">
55     <div class="con">
56         用户名：<input type="text">
57         <button onclick="stop()">取消</button>
58     </div>
59 
60 </div>
61 <script>
62     function stop() {
63         var model=document.getElementsByClassName("model")[0];
64         var shade=document.getElementsByClassName("shade")[0];
65         model.classList.add("hide");
66         shade.classList.add("hide");
67         
68     }
69      function start() {
70          var eles=document.getElementsByClassName("hide");
71          for (var i=0;i<eles.length;i++){
72              eles[0].classList.remove("hide");
73          }
74 
75      }
76 </script>
77 </body>
78 </html>