最近的项目需要实现带标志的漂亮弹匣，但是翻小程序文档也只能看到wx.showModal这个丑陋的东西……
曾经是非常尴尬的场面
但是，必须做。 否则，产品姐姐又会失控……
好吧，研究模式对话框的性质，自己DIY吧~
实现思想模式对话框之所以称为模式对话框，是因为在弹出窗口时，用户必须关闭此对话框才能操作其他窗口。
这样，我们的思路就清楚了。
1 .构建背景变暗的屏蔽，阻止用户在对话框外界面的此处编写代码片段并点击事件；
2 .构建可根据需要弹出的对话框(在弹出的同时触发掩码)。
示例代码. wxml :
view class=' mask ' catchtouchmove=' preventtouchmove ' wx : if=' { { showmodal } }/viewviewclass=' modal DLG ' wx louch ~/text button bindtap='go '点我可以关掉对话框/button/viewbuttonbindtap=' submit '点我的弹窗/button .
. mask{ width: 100%； height: 100%； 定位：固定； top: 0； left: 0； background: #000； z-index: 9000； opacity: 0.7； }.modalDlg{ width: 580rpx； height: 620rpx； 定位：固定； top: 50%； left: 0； z-index: 9999； 边距：-370 rpx 85 rpx； background-color: #fff； border-radius: 36rpx； display :闪存； flex-direction :列； align-items3360中心； } .js :
page(data: ) showmodal:false )、submit: function ) (this.setdata )、showmodal3360true ) }， preventtodal go: function () this.setdata (showmodal : false ) ) ) )注意，绑定到皮层view的preventtt 阻止tountouchmove函数在蒙版的wxss样式中，指定占整个屏幕的大小为100%。 模式对话框和外观的wxss样式都有z-index属性。 这是为了确保对话框始终浮在外观上。 这意味着对话框中的z-index始终大于外观。