完整代码
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 />111100 <br />111101 <br />111102 <br />111103 <br />111104 <br />111105 <br />111106 <br />111107 <br />111108 <br />111109 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 和 kuang150 document.getElementById("close").onclick =function( ){151 document.body.removeChild(mask);152 document.body.removeChild(kuang);153 }154 155 // mask做一个点击事件,关闭mask 和 kuang156 document.getElementById("mask").onclick =function( ){157 document.body.removeChild(mask);158 document.body.removeChild(kuang);159 }160 161 }162 </script>
预览图：
还没有人抢沙发呢~