小程序遮罩層

評論及遮罩層 WXML：

<!--評論區域  -->
  <view class="Y_pinlun">
    <view class="Y_p-top">
      <view class="Y_p-all">
        <view class="Y_p-one">
          <image src="../../images/eye.png" style="width:20px;height:20px"></image>
          <text>266</text>
        </view>
        <view class="Y_p-one">
          <image src="../../images/zan.png" style="width:20px;height:20px"></image>
          <text>266</text>
        </view>
      </view>
<!--點擊寫評論，彈出遮罩層 -->
      <view class="Y_p-last" bindtap="show" style="width:20%">
        <image src="../../images/pen.png" style="width:20px;height:20px"></image>
        <text>寫評論</text>
      </view>
    </view>
  </view>

  <view class="discuss">
    <view class="discuss_one">
      <view class="left_photo">
        <image src="../../images/jianjie.png"></image>
      </view>
      <view class="middle_pj" style="padding-left:10px;box-sizing:border-box">
        <view class="xingxing">
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
        </view>
        <view class="middle_zi">哈哈哈</view>

      </view>
      <view class="right_time">2018-05-03</view>
    </view>

    <view class="discuss_one">
      <view class="left_photo">
        <image src="../../images/jianjie.png"></image>
      </view>
      <view class="middle_pj" style="padding-left:10px;box-sizing:border-box">
        <view class="xingxing">
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
        </view>
        <view class="middle_zi">哈哈哈</view>

      </view>
      <view class="right_time">2018-05-03</view>
    </view>

    <view class="discuss_one">
      <view class="left_photo">
        <image src="../../images/jianjie.png"></image>
      </view>
      <view class="middle_pj" style="padding-left:10px;box-sizing:border-box">
        <view class="xingxing">
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
          <text>★</text>
        </view>
        <view class="middle_zi">哈哈哈</view>

      </view>
      <view class="right_time">2018-05-03</view>
    </view>
  </view>
</view>

<view>
  <view class="zhezao" wx:if="{{flag==1}}">
    <view class="t_w">
      <view class="t_image" bindtap="conceal">
        <image class="t_image1" src="../../images/ch.png"></image>
      </view>
      <view class="tanchu_view">
        <view>
          <form>
            <view class="bg_start">
              <view class="bg_view">★</view>
              <view class="bg_view">★</view>
              <view class="bg_view">★</view>
              <view class="bg_view">★</view>
              <view class="bg_view">★</view>
            </view>
            <view class="txtys">
              <textarea placeholder='評論內容'></textarea>
            </view>
            <!--提交開始-->
            <view class="txtsure">
              <view class="txtsurebg" bindtap="conceal">
                <text class="txtsurename">提交</text>
              </view>
            </view>
          </form>
        </view>
      </view>
      <!--彈出框結束-->
    </view>
  </view>
</view>

遮罩層Wxss
.zhezao{  
  position:fixed;  
  width:100%;  
  height:100%;  
  top:0px;  
  background:rgba(0,0,0,0.4);  
  overflow: hidden;  
  }  
.t_w{  
  position:relative;  
  }  
.tanchu_view{  
  width: 80%;  
  margin:25% auto;  
  overflow: hidden;  
  background-color: #fff;  
  border-radius: 10rpx;  
  padding: 4rpx;  
  }  
  
  
.bg_view{  
  /* margin:30rpx auto 30rpx auto;   */
  color:#fcb712;  
  font-size:70rpx;   
padding-right:8px;
  text-align: center;  
  display:inline-block;
  }  
  .bg_start{
    width:100%;
    text-align:center;
     
  }
  .txtys{  
    font-size: 24rpx;  
     padding:8px 10px;
     box-sizing:border-box;
  } 
   .txtys textarea{
     padding-left:10px;
     padding-top:10px;
     background:#eee;
    box-sizing:border-box;
    border:1px solid #dedede;width:100%
     } 
  
.txtsure{  
 width: 100%;  
 height: 100%;  
 display: flex;  
 justify-content: center;  
 
}  
  
/*提交背景*/  
.txtsurebg{  
  font-size:13px;
  display: flex;  
  justify-content: center;  
  align-items: center;  
  width:90%;
  margin: 50rpx 0;  
  background-color:#eee;  
   flex-direction: column;  
   padding:16rpx 0;
   border-radius:8rpx
}  
  
/*確定文本*/  
.txtsurename{  
   margin-bottom: 0rpx;  
   color: #000;  
   font-size: 28rpx;  
}  
/*右上角圖標*/  
.t_image{  
  width:15px;  
  height:15px;  
  position: absolute;  
  top: 3%;  
  left:85%;  
  }  
  
/*右上角圖標*/  
.t_image1{  
  display:block;  
  width:15px;  
  height:15px;  
  }  

   .discuss{box-sizing:border-box;}
   .left_photo image{width:35px;height:35px;border-radius:50%}
   .left_photo{width:10%;}
   .discuss_one{display:flex;border-bottom:1px solid #eee;padding:10px 0}
   .xingxing text{display:inline-block;color:#fcb712}
   .middle_zi{font-size:12px;color:#707070;padding-top:5px}
   .middle_pj{width:70%}
   .right_time{font-size:12px;color:#707070;width:30%;text-align:right;line-height:41px;}

 

 data: {
    flag:0
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },
  // 遮罩層顯示  
  show: function () {
    this.setData({ flag: 1 })
  },
  // 遮罩層隱藏  
  conceal: function () {
    this.setData({ flag: 0 })
  },  

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})