<button size="mini" bindtap="showDialogBtn">点击我弹出弹出框</button>
<view catchtouchmove="preventTouchMove" class="modal-mask" bindtap='hiddenmodel' wx:if="{{ showModel}}" ></view>
<view class='modal-dialog' wx:if="{{ showModel}}">
<view class='modal-title'>我是标题</view>
<view class='modal-content'>
<view> 我是内容</view>
<view> 我是内容</view>
<view> 我是内容</view>
</view>
<view class='modal-footer'>
<button bindtap='onCancel' >取消</button>
<button bindtap='onConfirm' >确定</button>
</view>
</view>
/* 模态框开始 */
.modal-mask{
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0.5;
z-index: 9000;
top:0;
left: 0;
overflow: hidden;
color: #fff;
}
.modal-dialog{
width:540rpx;
overflow: hidden;
position: fixed;
top: 50%;
z-index: 9999;
left: 50%;
transform: translate(-50%,-50%);
background: #f9f9f9;
border-radius: 36rpx;
}
.modal-title{
text-align: center;
margin: 20rpx 0;
}
.modal-content{
min-height: 150rpx;
margin: 50rpx 32rpx;
}
.modal-footer{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.modal-footer button::after{
width: 50%;
border: none;
border-radius: 0;
}
.modal-footer button:nth-child(1){
border-right: 1px solid #eeeeee;
display: block;
width: 50%;
}
.modal-footer button{
width: 50%;
}
/* 模态框结束 */
data: {
showModel:false,//默认隐藏莫太框
},
hiddenmodel: function () {
this.setData({
showModel: false
})
},
showDialogBtn: function () {
this.setData({
showModel: true
})
},
onCancel: function () {
this.setData({
showModel: false
})
},
onConfirm: function () {
this.setData({
showModel: false
})
},
preventTouchMove: function () {
},