为什么要自定义模态框？

因为官方提供的模态框缺乏灵活性，无法满足每个人的需求，所以我们可以根据自己的实际需求来实现自定义模态框。

效果图

实现思路

通过一个蒙层自定义的弹窗来实现上图的效果，而弹窗的消失与出现则通过一个状态值来控制即可。

界面代码

index.wxml

！-请在需要触发弹窗的地方添加以下函数，可以是按钮或者文本框-

bindtap='showDialogBtn '

！-自定义弹窗-

view class=' modal-mask ' bind tap=' HideModal ' catch touch move=' true ' wx : if=' { { ShowModal } } '/view

view class=' modal-dialog ' wx : if=' { { ShowModal } } '

view class='modal-title '修改求职意向/view

view class='modal-content '

view class='modal-input '

输入占位符-class=' input-holder ' type=' number ' maxlength=' 10 ' bind input=' input change ' class=' input '占位符='请输入您的求职意向/input

/view

/view

view class='modal-footer '

视图类=' BTN-取消'绑定点击=' OnCancel '数据-状态='取消'取消/view

视图类=' BTN-确认'绑定点击=' OnConfirm '数据-状态='确认'确定/view

/view

/view

样式代码

index.wxss

/* 自定义弹窗样式*/。模态掩码{

宽度： ;

高度： ;

位置：固定；

top : 0；

左： 0；

背景： # 000;

opacity: 0.5

隐藏飞越：

z指数： 9000;

color: # fff

}。模态对话框{

宽度： 540rpx

隐藏飞越：

位置：固定；

前：名50%；

左： 0；

z-index : 9999

背景： # f9f9f9

边距：-180 rpx 105 rpx；

border-radius : 36rpx

}。modal-title {

衬垫-顶部： 50 rpx

font-size : 45 rpx

颜色： # 030303

文本-对齐：中心；

}。模态内容{

padding: 50rpx 32rpx

}。模态输入{

显示： flex

背景# fff

border: 2rpx实心# ddd

边界半径： 4r px

font-size : 35 rpx

}。输入{

宽度： ;

高度： 82rpx

font-size : 35 rpx

行高： 35 rpx

padding: 0 20rpx

框尺寸：边框；

颜色： # 333

}

输入固定器{

颜色： # 666

font-size : 35 rpx

}。模态页脚{

显示： flex

挠曲方向：行；

高度： 86rpx

border-top : 1px solid # dede de；

font-size : 40 rpx

行高： 86 rpx

}。BTN-取消{

宽度： 50%;

颜色： # 666

文本-对齐：中心；

border-right : 1px solid # dede de；

}。BTN-确认{

宽度： 50%;

color: # ec0033

文本-对齐：中心；

}

/* 自定义弹窗样式*/

逻辑代码

index.js

页面({

/**

* 页面的初始数据

*/

数据： {

showModal: false，

inputValue: null

},

/**

* 弹窗

*/

showDialogBtn:函数(){

this.setData({

showModal: true

})

},

/**

* 弹出框蒙层截断触摸移动事件

*/

preventTouchMove:函数(){

返回

},

/**

* 隐藏模态对话框

*/

hideModal:函数(){

this.setData({

showModal: false

});

},

/**

* 对话框取消按钮点击事件

*/

onCancel:函数(){

这个。HideModal()；

},

/**

* 对话框确认按钮点击事件

*/

onConfirm:函数(){

这个。HideModal()；

},

/**

* 获取输入框中输入的值

*/

inputChange:function(选项){

/* 把文本框输入的内容方到数据里面*/

this.setData({

输入值e :选项。细节。价值

})

}

})

解读

preventTouchMove:函数(){

返回

}

结合界面代码(index.wxml)来看，蒙层视角里有一个事件绑定捕捉触摸移动=“防止触摸移动”。这样写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。