关于自定义模态框的实现

Posted 2021-03-02 yuanchao-blog

在做微信小程序时，原本想的是官方组件可能会提供自定义模态框，当然微信小程序的确有模态框（api里）但是往往不能满足我们的需求。原生手写模态框

wxml

<view wx:if="{{showPowerPriceView}}">
<view class=‘bg_layer‘>
    <view class="power-price-box power-price-flex">
自定义内容
</view>
</view>
</view>

js文件

// 打开模态框
 showPowerPrice: function() {
    this.setData({
      showPowerPriceView: true
    })
  },

// 关闭模态框
  closeModal: function () {
    this.setData({
      showPowerPriceView: false
    })
  }

wxss

蒙层
.bg_layer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}

自定义模态框内容，居中显示
.power-price-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 600rpx;
  background: rgba(232, 240, 255, 1);
  border-radius: 10rpx;
  z-index: 9999;
}