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

JQuery弹出层，实现弹层切换，可显示可隐藏。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:33:49

原创

1560人浏览过

 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>

登录后复制