由于官方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即可。
此为最纯净的版本，个人经常使用，遂发出来，希望能够加快大家的开发效率。
如果有幸能够帮到您，希望能够随手给个赞，或者评论，感之不尽~
