JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>jQuery弹出层效果</title>
 5     <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />
 6     <meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" />
 7     <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script><!--  无jquery亦可 -->
 8     <!-- 用了两层,底层用来挡下界面元素,顶层用于显示
 9     而底层为了能遮住所有界面元素,所以用了100% -->
10     <style>
11     .black_overlay{
12     display: none;
13     position: absolute;
14     top: 0%;
15     left: 0%;
16     width: 100%;
17     height: 100%;
18     background-color: black;
19     z-index:1001;
20     -moz-opacity: 0.8;
21     opacity:.80;
22     filter: alpha(opacity=80);
23     }
24     .white_content {
25     display: none;
26     position: absolute;
27     top: 10%;
28     left: 10%;
29     width: 80%;
30     height: 80%;
31     border: 16px solid lightblue;
32     background-color: white;
33     z-index:1002;
34     overflow: auto;
35     }
36     .white_content_small {
37     display: none;
38     position: absolute;
39     top: 20%;
40     left: 30%;
41     width: 40%;
42     height: 50%;
43     border: 16px solid lightblue;
44     background-color: white;
45     z-index:1002;
46     overflow: auto;
47     }
48     </style>
49     <script type="text/javascript">
50             //弹出隐藏层
51             function ShowDiv(show_div,bg_div){
52                 document.getElementById(show_div).style.display='block';
53                 document.getElementById(bg_div).style.display='block';
54                 var bgdiv = document.getElementById(bg_div); //无此亦可
55                 bgdiv.style.width = document.body.scrollWidth;//无此亦可
56                 // bgdiv.style.height = $(document).height();
57                 $("#"+bg_div).height($(document).height()); // 无jquery亦可 
58             };
59 
60             //关闭弹出层
61             function CloseDiv(show_div,bg_div)
62             {
63                 document.getElementById(show_div).style.display='none';
64                 document.getElementById(bg_div).style.display='none';
65             };
66     </script>
67 </head>
68 <body>
69     <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
70     <!--弹出层时背景层DIV-->
71     <div id="fade" class="black_overlay"></div> <!-- 底层 -->
72     <div id="MyDiv" class="white_content"> <!-- 弹出层 -->
73         <div style="text-align: right; cursor: default; height: 40px;">
74         <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
75         </div>
76         目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
77     </div>
78 </body>
79 </html>

 

引用自: http://www.cnblogs.com/yichengbo/archive/2012/03/12/2392630.html  (添加部分注释,修改部分格式)

 

posted @ 2015-07-30 16:29  苦涩泪滴  阅读(242)  评论(0)  编辑  收藏  举报