效果图
不说废话,直接上代码 代码片
.
.wxml:
<!-- 自定义弹框-->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<view style="padding:5%;width:100%;height:100%">
<view class="title">提示</view>
<view style="padding:30rpx;word-wrap: break-word;font-size: 30rpx;">
{{content}}
</view>
</view>
<view class="modalBtnBox">
<view class="modalBtnCommon modalBtnL" bindtap="cancel">取消</view>
<view class="modalBtnCommon modalBtnR" bindtap="enter">{{btnText}}</view>
</view>
</view>
.wxss:
/* 自定义弹框 */
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 600rpx;
height: 450rpx;
position: fixed;
top:50%;
left: 50%;
z-index: 9999;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.modalDlg .title{
text-align: center;
font-size: 45rpx;
font-weight: bold;
}
.modalBtnCommon{
width: 50%;
background-color: white;
text-align: center;
line-height: 100rpx;
font-size: 35rpx;
border-top: 1px solid rgba(168, 161, 161, 0.5);
}
.modalBtnBox{
display: flex;
justify-content: space-between;
width: 100%;
height:150rpx;
}
.modalBtnL{
border-bottom-left-radius: 30rpx;
}
.modalBtnR{
color: #576B95;
border-left:1px solid rgba(168, 161, 161, 0.5);
border-bottom-right-radius: 30rpx;
}
.js:
// 自定义弹框
enter: function() {
this.setData({
showModal: false
})
},
preventTouchMove: function() {
},
cancel: function() {
this.setData({
showModal: false
})
}
需要注意的地方:
蒙层view中绑定的preventTouchMove函数是一个空函数,使用了catch事件,目的就是阻止touchmove这样一个冒泡事件继续向下传递。