蒙層實現(小程序)

1.實現思路：分爲三層：點擊彈出的圖片作爲一層，蒙層作爲一層，原界面顯示作爲一層

                                       蒙層樣式設爲不可見，點擊後添加該樣式,點擊close小圖標，則移除該樣式

2.實現代碼:

wxml：

<!--pages/tes/test.wxml-->
<view>
  <view class="add-btn" hover-class="plus-hover" bindtap="add_click">
    <image src="/pages/images/add-btn.png"></image>
  </view>
  <view class="board  {{hideStatus}}"></view>
  <view class="resource_choose {{hideStatus}}">
    <image class="floatImg" src="{{cover}}">
      <image class="closeImg" src='/pages/images/close.png' bindtap="closeImg"></image>
      <image class="shareImg" src='/pages/images/share.png' bindtap="shareResource"></image>
    </image>
  </view>   
  <block wx:for="{{alphe.length}}"> 
   <block wx:if="{{section_list[alphe[index]].length>0}}">
      <view class="section section_block" scroll-x="true">    
          <view class="first_litter">{{alphe[index]}}</view>    
          <block wx:for="{{section_list[alphe[index]]}}">        
            <view class="book_sharp" bindtap="showBookPicture" data-bookFilePath="{{item.bookFilePath}}" data-bookId="{{item.bookId}}" data-cover="{{item.bookCover}}">{{item.bookName}}</view>
          </block>
      </view>
    </block>
  </block>
</view>

js:

data: {
    section_list:[],
    alphe:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    cover:"",
    hideStatus:".block_hide",
    bookId:"",
    bookFilePath:""
  },
showBookPicture:function(e){
    let that=this;
    let cover = "data:image/png;base64," +e.currentTarget.dataset.cover;
    let bookid =  e.currentTarget.dataset.bookid;
    let bookFilePath = e.currentTarget.dataset.bookfilepath;
    that.setData({
      cover: cover,
      hideStatus:"",
      bookId: bookid,
      bookFilePath: bookFilePath
    })
  },
  closeImg:function(){
    this.setData({
      hideStatus: ".block_hide"
    })
  },

  css:

.board{
  width:100%;
  height:100%;
  position:fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}
.floatImg{
  width:250px;
  height:250px;
}
.closeImg{
  left: 305px;
  top: 130px;
}