效果示例
html代码///
css
page{
background: #f4f4f4;
}
.show-btn {
margin-top: 100rpx;
width: 80%;
background: white;
color: #696969;
border: 1px solid #303030;
}
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 540rpx;
height:419rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 9999;
background: white;
margin: -180rpx 105rpx;
border-radius: 36rpx;
}
.modal-title {
padding-top: 50rpx;
font-size: 36rpx;
color: #030303;
text-align: center;
}
.modal-ti{
font-size: 26rpx;
text-align: center;
color: #030303;
padding-top: 20rpx;
}
.modal-content {
padding: 50rpx 32rpx;
}
.modal-input .moda_1,.modal-input .moda_2 {
width: 85%;
display: flex;
background: #fff;
border-top: 2rpx solid #ddd;
margin: auto;
text-align: center;
}
.modal-input .moda_1 navigator,.modal-input .moda_2 navigator{
width: 100%;
text-align: center;
line-height: 100rpx;
font-size: 30rpx;
color: #59B550;
}
js
Page({
data: {
showModal: false,
},
onLoad: function () {
},
/**
- 弹窗
/
showDialogBtn: function () {
this.setData({
showModal: true
})
},
/* - 弹出框蒙层截断touchmove事件
/
preventTouchMove: function () {
},
/* - 隐藏模态对话框
/
hideModal: function () {
this.setData({
showModal: false
});
},
/* - 对话框取消按钮点击事件
/
onCancel: function () {
this.hideModal();
},
/* - 对话框确认按钮点击事件
*/
onConfirm: function () {
this.hideModal();
}
})
