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>
