弹窗效果实现-优快云博客

此实例可说是十分常见，主要功能有：点击弹出层后背景变灰；点击背景任何一处关闭层；拉动滚动条时层的位置不变。

感觉代码不够精简。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>弹出层</title>
 6 <style type="text/css">
 7 * {margin:0; padding:0;}
 8 #popup {position:absolute; display:none; width:500px; border:#ccc solid 5px; height:300px; z-index:10; background:#fff;}
 9 #wrap {position:absolute; top:0; left:0; width:100%; background:#eee; z-index:9; opacity:0.5; filter:alpha(opacity=50); cursor:pointer;}
10 </style>
11 </head>
12 <body>
13     <input type="button" value="submit" id="btn" />
14     <div id="popup"><a href="javascript:;" id="closeDiv">关闭</a></div>
15     <div style="height:2000px;" id="abc"></div>
16     <script type="text/javascript">
17     var obj_btn = document.getElementById("btn");
18     var obj_div = document.getElementById("popup");
19     var obj_link = document.getElementById("closeDiv");
20     var new_div = document.getElementById("wrap");
21     obj_btn.onclick = popup;
22     obj_link.onclick = function() {
23         obj_div.style.display = "none";
24         new_div.parentNode.removeChild(new_div);
25     };
26     function popup() {
27         obj_div.style.display = "block";
28         obj_div.style.top = document.documentElement.clientHeight/2 - obj_div.offsetHeight/2 + "px";
29         obj_div.style.left = document.documentElement.clientWidth/2 - obj_div.offsetWidth/2 + "px";
30         new_div = document.createElement("div");
31         new_div.setAttribute("id","wrap");
32         document.body.appendChild(new_div);
33         new_div.style.height = document.body.offsetHeight + "px";
34     }
35     window.onscroll = function() {
36         obj_div.style.top = document.documentElement.clientHeight/2 - obj_div.offsetHeight/2 + document.documentElement.scrollTop + document.body.scrollTop + "px";
37     };
38     window.onresize = function() {
39         obj_div.style.top = document.documentElement.clientHeight/2 - obj_div.offsetHeight/2 + "px";
40         obj_div.style.left = document.documentElement.clientWidth/2 - obj_div.offsetWidth/2 + "px";
41     };
42     document.onclick = function(e) {
43         if(!e) {var e = window.event;}
44         if(e.srcElement) {
45             var a = e.srcElement.getAttribute("id");
46         }
47         else {
48             var a = e.target.getAttribute("id");
49         }
50         if(a!=="popup" && a!=="btn") {
51             obj_div.style.display = "none";
52             new_div.parentNode.removeChild(new_div);
53         }
54     }
55     </script>
56 </body>
57 </html>