原理：
寫一個遮罩功能div，寬度高度均為100%，設置背景色，設置透明度，設置z-index 值為倒數第二大，目的為了在倒數第二層，把頁面顯示的內容給蓋住！
寫一個彈出功能div，設置z-index 值為最大，目的要顯示在最上層！
html代碼：
<div id="body"> 顯示頁面的全部內容 <div id="open">打開彈框</div> </div> //頁面的遮罩層 <div id="cover"></div> //頁面的彈出框 <div id="modal"> <div id="close">關閉彈框</div> </div>jquery代碼：
<script> $(document).ready(function(){ $("#open").click(function() { cover.style.display="block"; //顯示遮罩層 modal.style.display="block"; //顯示彈出層 }) $("#close").click(function() { cover.style.display="none"; //隱藏遮罩層 modal.style.display="none"; //隱藏彈出層 }) }) </script>CSS代碼：
#cover{ position:absolute;left:0px;top:0px; background:rgba(0, 0, 0, 0.4); width:100%; /*寬度設置為100%，這樣才能使隱藏背景層覆蓋原頁面*/ height:100%; filter:alpha(opacity=60); /*設置透明度為60%*/ opacity:0.6; /*非IE瀏覽器下設置透明度為60%*/ display:none; z-Index:999; } #modal{ position:absolute; width:500px; height:300px; top:50%; left:50%; background-color:#fff; display:none; cursor:pointer; z-Index:9999; }