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 (添加部分注释,修改部分格式)