最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊,要不然产品大姐又要暴走了……
好吧,来研究一下模态对话框的性质自己DIY吧~
实现思路
模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
那么这样一来,我们的思路就很明确了:
1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片
点击事件;
2. 构建一个对话框,在需要时弹出即可(弹出同时触发蒙层)。
示例代码
.wxml:
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{
{
showModal}}"></view>
<view class="modalDlg"