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

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

效果图：

WXML:

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即可。

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

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