wxml
<button class="btn" bindtap="showDialog">dialog</button>
<view class="dialog_bg" wx:if='{{dialog==true}}' bindtap="">
<view class="dialog_dev">
<view class="title_dev">
<text class="title_text">提示</text>
</view>
<text class="text"> dialog</text>
<view class="submit_dev">
<view class="hideDialog" bindtap="hideDialog">取消</view>
</view>
</view>
</view>
js
data: {
dialog: true
},
showDialog() {
this.setData({
dialog: true
})
},
hideDialog() {
this.setData({
dialog: false
})
},
wxss
.btn {
width: auto;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: white;
}
.dialog_bg {
width: 100%;
height: 100%;
position: fixed;
top: 0rpx;
left: 0rpx;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.dialog_dev {
width: 320px;
height: 200px;
background: white;
display: flex;
flex-direction: column;
}
.title_text {
font-size: 15px;
margin-left: 30px;
margin-right: 30px;
}
.title_dev {
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.title_text {
font-size: 15px;
margin-left: 30px;
margin-right: 30px;
}
.hideDialog {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 14px;
background: #548DFF;
}
.text {
width: auto;
height: auto;
overflow: auto;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
.submit_dev {
width: 100%;
height: 45px;
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}