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="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
8 <style>
9 .black_overlay{
10 display: none;
11 position: absolute;
12 top: 0%;
13 left: 0%;
14 width: 100%;
15 height: 100%;
16 background-color: black;
17 z-index:1001;
18 -moz-opacity: 0.8;
19 opacity:.80;
20 filter: alpha(opacity=80);
21 }
22 .white_content {
23 display: none;
24 position: absolute;
25 top: 10%;
26 left: 10%;
27 width: 80%;
28 height: 80%;
29 border: 16px solid lightblue;
30 background-color: white;
31 z-index:1002;
32 overflow: auto;
33 }
34 .white_content_small {
35 display: none;
36 position: absolute;
37 top: 20%;
38 left: 30%;
39 width: 40%;
40 height: 50%;
41 border: 16px solid lightblue;
42 background-color: white;
43 z-index:1002;
44 overflow: auto;
45 }
46 </style>
47 <script type="text/javascript">
48 //弹出隐藏层
49 function ShowDiv(show_div,bg_div){
50 document.getElementById(show_div).style.display=‘block‘;
51 document.getElementById(bg_div).style.display=‘block‘ ;
52 var bgdiv = document.getElementById(bg_div);
53 bgdiv.style.width = document.body.scrollWidth;
54 // bgdiv.style.height = $(document).height();
55 $("#"+bg_div).height($(document).height());
56 };
57 //关闭弹出层
58 function CloseDiv(show_div,bg_div)
59 {
60 document.getElementById(show_div).style.display=‘none‘;
61 document.getElementById(bg_div).style.display=‘none‘;
62 };
63 </script>
64 </head>
65 <body>
66 <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv(‘MyDiv‘,‘fade‘)" />
67 <!--弹出层时背景层DIV-->
68 <div id="fade" class="black_overlay">
69 </div>
70 <div id="MyDiv" class="white_content">
71 <div style="text-align: right; cursor: default; height: 40px;">
72 <span style="font-size: 16px;" onclick="CloseDiv(‘MyDiv‘,‘fade‘)">关闭</span>
73 </div>
74 推荐自定义改造
75 </div>
76 </body>
77 </html>
时间： 2024-10-29 05:11:31