弹出DIV窗口 

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹出DIV窗口</title>
 6         <style type="text/css"> 
 7             #light {
 8                 display:none;
 9                 position:absolute;
10                 top:25%;
11                 left:25%;
12                 width:50%;
13                 height:50%;
14                 padding:16px;
15                 border:2px solid #000000;
16                 background-color:white;
17                 z-index:2;
18                 overflow:auto;
19             }
20         </style>
21     </head> 
22 <body> 
23 <p><a id="openPop" href="#">打开窗口</a></p> 
24 <div id="light">鼠标移出窗口区域自动关闭</div> 
25 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
26 <script type="text/javascript">
27     $(function() {
28         $("#openPop").click(function() {
29             $("#light").show();
30         });
31 
32         $("#light").mouseout(function() {
33             $(this).hide();
34         });
35     });
36 </script>
37 </body> 
38 </html>

 

posted @ 2013-08-29 10:48  Bruce.Chang.Lee  阅读(150)  评论(0)    收藏  举报