微信小程序自定义纯净模态框（弹出框）的实例

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

/ 模态框 /
 
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 : 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;
 : 20%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 9999;
 background: white;
 border-radius: 5rpx;
}

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