JQuery弹出层，实现弹层切换，可显示可隐藏。

最新推荐文章于 2022-01-23 17:59:31 发布

weixin_30639719

最新推荐文章于 2022-01-23 17:59:31 发布

阅读量116

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/ChinazhouWang/p/4958216.html

版权

 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>

转载于:https://www.cnblogs.com/ChinazhouWang/p/4958216.html

weixin_30639719

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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代码,广告幻灯,图片切换...
复制链接

扫一扫