遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用css来实现遮罩
dom节点代码:
1
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 }
主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。