前端如何实现遮罩功能

前端如何实现遮罩功能

     web端中经常需要让局部区域可视，但不可点击。

这是可以通过遮罩功能实现。

     实现思路：

   在上面浮动增加一层div层将下层盖住，通过z-index实现。

实现代码：

index.html:

  <!-- 遮罩--><div class="weatherShade"  ></div><div class="weatherShade2"  ></div><div class="weatherShade3"  ></div><div class="weatherShade4"  ></div><div class="weatherShade5"  ></div><iframe id="MyIFrame" allowtransparency="true" style="width: 100%;background:#fff ;margin-top: 0px;height: 80px;color: #fff;"frameborder="0"   scrolling="no" src="http://tianqi.eastday.com/plugin/widget_v1.html?sc=1&z=1&t=0&v=0&d=3&bd=0&k=&f=&q=1&a=1&c=54511&w=385&h=96&align=center"></iframe>

index.css:

.weatherShade{background: rgba(0,0,0,0.0);position: absolute;width: 100%;height: 150px;z-index: 10000;}.weatherShade2{background: rgba(0,0,0,0.0);position: absolute;width: 100%;height: 150px;z-index: 10001;}.weatherShade3{background: rgba(0,0,0,0.0);position: absolute;width: 100%;height: 150px;z-index: 10002;}.weatherShade4{background: rgba(0,0,0,0.0);position: absolute;width: 100%;height: 150px;z-index: 10003;}.weatherShade5{background: rgba(0,0,0,0.0);position: absolute;width: 100%;height: 150px;z-index: 10004;}