原生js制作弹出框
完整代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 12 #mask{ 13 background-color: black; 14 opacity: 0.3; 15 position: absolute; 16 top: 0px; 17 left: 0px; 18 z-index: 10; 19 } 20 #kuang{ 21 width: 400px; 22 height: 300px; 23 background-color: blueviolet; 24 position: absolute; 25 z-index: 888; 26 left: 200px; 27 top: 250px; 28 29 } 30 #close{ 31 width: 50px; 32 height: 50px; 33 background-color: red; 34 position: absolute; 35 top: 5px; 36 right: 5px; 37 z-index: 999; 38 } 39 #close:hover{ 40 cursor: pointer; 41 } 42 </style> 43 44 </head> 45 <body> 46 <input type="button" value="登陆" onclick="show( )"/> 47 48 <br />111 49 <br />111 50 <br />111 51 <br />111 52 <br />111 53 <br />111 54 <br />111 55 <br />111 56 <br />111 57 <br />111 58 <br />111 59 <br />111 60 <br />111 61 <br />111 62 <br />111 63 <br />111 64 <br />111 65 <br />111 66 <br />111 67 <br />111 68 <br />111 69 <br />111 70 <br />111 71 <br />111 72 <br />111 73 <br />111 74 <br />111 75 <br />111 76 <br />111 77 <br />111 78 <br />111 79 <br />111 80 <br />111 81 <br />111 82 <br />111 83 <br />111 84 <br />111 85 <br />111 86 <br />111 87 <br />111 88 <br />111 89 <br />111 90 <br />111 91 <br />111 92 <br />111 93 <br />111 94 <br />111 95 <br />111 96 <br />111 97 <br />111 98 <br />111 99 <br />111 100 <br />111 101 <br />111 102 <br />111 103 <br />111 104 <br />111 105 <br />111 106 <br />111 107 <br />111 108 <br />111 109 110 111 </body> 112 </html> 113 <script type="text/javascript"> 114 function show( ){ 115 // 获取整个页面的宽和高 116 var page_width =document.documentElement.scrollWidth; 117 var page_height =document.documentElement.scrollHeight; 118 119 // 获取浏览器的宽和高 120 var b_width =document.documentElement.clientWidth; 121 var b_height = document.documentElement.clientHeight; 122 123 // 创建一个叫mask的div,id是#mask; 124 var mask =document.createElement("div"); 125 mask.id ="mask"; 126 127 128 // mask的宽和高 129 mask.style.width =page_width +"px"; 130 mask.style.height = page_height +"px"; 131 132 // 在body里添加一个mask的子元素; 133 document.body.appendChild(mask); 134 135 // 创建一个叫kuang的div,id是#kuang; 136 var kuang = document.createElement("div"); 137 kuang.id ="kuang"; 138 139 // kuang 在浏览器水平和垂直居中 140 kuang.style.left = (b_width - 400) / 2 +"px"; 141 kuang.style.top =( b_height -300) /2 +"px"; 142 // 在kuang里放一个div,id=close 143 kuang.innerHTML ='<div id ="close"></div>'; 144 145 // 在body里添加一个kuang的子元素; 146 var ku =document.body.appendChild(kuang); 147 alert(ku); 148 ku.innerHTML+=222222222222222222; 149 // close做一个点击事件,关闭mask 和 kuang 150 document.getElementById("close").onclick =function( ){ 151 document.body.removeChild(mask); 152 document.body.removeChild(kuang); 153 } 154 155 // mask做一个点击事件,关闭mask 和 kuang 156 document.getElementById("mask").onclick =function( ){ 157 document.body.removeChild(mask); 158 document.body.removeChild(kuang); 159 } 160 161 } 162 </script>
预览图：
