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>