微信小程序：自定义弹出层

自定义弹出层

弹出层内容.wxml

//触发弹出层：bindtap="show"
 <view class="fenxiang-box">
    <image bindtap="show" src="/image/fenxiang-btn.png" class="fenxiang-btn">image>
  view>


//弹出层内容，其中的“我知道”中绑定让弹出层消失的函数：bindtap="hide"
<view class="modal-box" hidden="{{flag}}" bindtap="hide">

    <view class="modal-body">

      <view class="modal-content">
        <image src="/image/1.png" class="fenxiang">image>
        <button class="knowBtn" bindtap="hide">我知道了button>
     view>
    view>
  view>

.wxss

.modal-box{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  background:rgba(0,0,0,0.4);
  overflow: hidden;
  }

.modal-body{
  position:relative;
  }

.modal-content{
  /* width: 60%; */
  margin:0 10% 0 30%;
  overflow: hidden;
  border-radius: 10rpx;}

.modal-content{
  width: 60%;
  height:150px; 
}
.modal-content .fenxiang{
  width: 100%;
  height: 40%;
}

.js

    data:{
         flag: true,
    },

  /**
   * 弹出层函数
   */
  //出现
  show: function () {

    this.setData({ flag: false })

  },
  //消失

  hide: function () {

    this.setData({ flag: true })

  },

效果：