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>
