添加遮罩層

遮罩層效果相信是許多開發需求時候常常會碰到的一個狀況，實現遮罩層效果的方式有不少種，下面介紹最簡單的一種，利用CSS來實現遮罩

dom節點代碼：

 1 <!-- 進度條遮罩 -->  <t:div id="shade" styleClass="shade" > </t:div> 

CSS樣式代碼

 1     .ui-progressbar{
 2                 position: absolute;
 3                 top:40%;
 4                 left:40%;
 5                 z-index: 99999999;
 6                 width:500px;
 7                 height:22px;
 8                 line-height:22px;
 9                 display:none;
10             }
11             .ui-progressbar-value 
12             { 
13                     background-image: url("../images/pbar-ani.gif"); 
14                 border:0px;
15             }
16             .shade
17             {
18                background:rgba(0, 0, 0, 0.4);
19                width:100%;
20                height:100%;
21                position: absolute;
22                z-index:99;
23                left:0px;
24                top:0px;
25                opacity:0.6;
26                filter:alpha(opacity=60);
27                display:none; 
28             }

主要是經過控制兩個盒子的顯示層級，控制遮罩層的背景色和顯示透明度來達到遮罩效果。