<div id="body"> 顯示頁面的全部內容
    <div id="open">開啟彈框</div>
</div>
//頁面的遮罩層
<div id="cover"></div>
//頁面的彈出框
<div id="modal">
    <div id="close">關閉彈框</div>
</div>

<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>

#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;  
}