小程序项目记录----弹窗

小程序项目记录----弹窗

1、wxml

<view class="hide{{showView?'':'show'}}">
  <!--遮罩层  -->
  <view class="shade">
    <!--面板内容  -->
    <view class="conts">
      <image class="bgcImg" src="/images/slices/popup-1.png"></image>
      <image class="replyImg" src="/images/slices/popup-2.png"></image>
      <button class="answer" bindtap="close">我知道了</button>
    </view>
  </view>
</view>

2、wxss

/* 弹出窗 */

.shade {
  width: 100%;
  height: 2000rpx;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 9;
  position: absolute;
}

.conts {
  width: 630rpx;
  height: 428rpx;
  border-radius: 20rpx;
  position: fixed;
  top: 370rpx;
  left: 60rpx;
  text-indent: 60rpx;
}

.bgcImg {
  position: fixed;
  top: 70rpx;
  left: 60rpx;
  width: 630rpx;
  height: 764rpx;
}

.replyImg {
  width: 498rpx;
  height: 152rpx;
  position: fixed;
  top: 600rpx;
  left: 125rpx;
}

.answer {
  color: #999;
  font-size: 28rpx;
  font-family: PingFangSC;
  position: fixed;
  top: 730rpx;
  left: 230rpx;
  background: none !important;
}

button::after {
  border: none;
}

/*显示整个conts */

.show {
  display: block;
}

/*隐藏整个conts */

.hide {
  display: none;
}

3、js

data: {
    showView: true, //弹窗
  },
  // 点击来显示与隐藏整个“conts”
  onClickClear: function() {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  },
  // 点击“conts”，使得这个“conts”关闭  
  close: function() {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  },

4、弹出效果