CSS 實現遮罩層彈窗效果

CSS 實現遮罩層彈窗效果

原理：

寫一個遮罩功能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;  
}