div非彈出框半透明遮罩實現全屏幕遮蓋css實現

IE瀏覽器下設置元素css背景為透明：

background-color: rgb(0, 0, 0);  
filter: alpha(opacity=20);  

非IE瀏覽器下設置元素css背景為透明：

background-color: rgba(0, 0, 0, 0.2);

兼容各類瀏覽器設置css背景為透明辦法,即兩者合並設置css：

 （ie 不支持 rgba，所以rgba不會起作用）

background-color: rgb(0, 0, 0);  
filter: alpha(opacity=20);  
background-color: rgba(0, 0, 0, 0.2);  

另：RGB與16進制色互轉網站：http://11.1m86.com/

 

1.彈出框默認狀態下是隱藏的，當點擊彈出按鈕時，顯示該彈出框，如下：

<div class="modal" style="display: none;">  </div>

2.控制彈出框顯示的遮罩層CSS(遮罩整個屏幕，即添加一個灰色背景遮罩層)如下：

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    background-color: rgb(0, 0, 0);  
    filter: alpha(opacity=60);  
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 9999;
}