【微信小程序】自定义纯净模态框（弹出框）

由于官方API提供的模态框只能显示简单的文字，但是在实际应用场景中，我们需要模态框上能够显示各种各样的组件和样式，所以，以此为基础模拟出一套可以供大家自定义的纯净版的模态框，满足大家各式各样的需求。

效果图：

WXML:

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
  这一块区域为弹出框内容区域，根据自己的业务进行自定义布局
</view>

WXSS:

/* 模态框 */
 
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
}
 
.modal-dialog {
  box-sizing:border-box;
  width: 85%;
  padding:30rpx;
  overflow: hidden;
  position: fixed;
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 9999;
  background: white;
  border-radius: 5rpx;
}

JS:

  data: {
    showModal: false, //false关闭模态框  true开启模态框
  },
  /**
   * 弹出框蒙层截断touchmove事件
   */
  preventTouchMove: function () {
  },
  /**
   * 隐藏模态对话框
   */
  hideModal() {
    var that = this;
    that.setData({
      showModal: false,
    })
  },

开启模态框，只需要在标签上绑定一个事件，将data里的showModal置为true即可。

此为最纯净的版本，个人经常使用，遂发出来，希望能够加快大家的开发效率。

如果有幸能够帮到您，希望能够随手给个赞，或者评论，感之不尽~