一个层弹出窗口，点击页面的链接会激活本窗口，用CSS+JS实现的，类似于点击登录弹出登录框的效果。

点击文字弹出一个DIV层窗口代码

示例弹出层：请点这里

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 2 <html> 
 3     <head> 
 4         <title>点击文字弹出一个DIV层窗口代码</title> 
 5         <style> 
 6         .black_overlay{ 
 7             display: none; 
 8             position: absolute; 
 9             top: 0%; 
10             left: 0%; 
11             width: 100%; 
12             height: 100%; 
13             background-color: black; 
14             z-index:1001; 
15             -moz-opacity: 0.8; 
16             opacity:.80; 
17             filter: alpha(opacity=88); 
18         } 
19         .white_content { 
20             display: none; 
21             position: absolute; 
22             top: 25%; 
23             left: 25%; 
24             width: 55%; 
25             height: 55%; 
26             padding: 20px; 
27             border: 10px solid orange; 
28             background-color: white; 
29             z-index:1002; 
30             overflow: auto; 
31         } 
32     </style> 
33     </head> 
34     <body> 
35         <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> 
36         <div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div> 
37         <div id="fade" class="black_overlay"></div> 
38     </body> 
39 </html>

View Code

这是一个层窗口示例程序. 点这里关闭本窗口

posted on 2014-06-24 22:15 ymlove7 阅读(292) 评论(0) 收藏举报