模拟微信小程序的showModal弹框
image.png
html:
<!-- 手写提示框 -->
<view wx:if="{{modalIsShow}}" class="mask"></view>
<view wx:if="{{modalIsShow}}" class="my-dialog">
<view class="my-dialog__hd">
<view class="my-dialog__title">提示</view>
</view>
<view class="my-dialog_bd">
按揭余额将影响您的额度，请如实填写。
<text style="color:red">确定后将无法修改！</text>
</view>
<view class="my-dialog__ft">
<view class="my-dialog__btn my-dialog__btn_default r-line" bindtap="handleConfirm">确定</view>
<view class="my-dialog__btn my-dialog__btn_primary" bindtap="goBackToUpdate">返回修改</view>
</view>
</view>
js:返回修改关闭弹框
// 返回修改
goBackToUpdate(){
this.setData({
modalIsShow: false,
})
},
wxss:
/* 手写showModal */
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.my-dialog{
position: fixed;
z-index: 999999;
left: 76rpx;
right: 76rpx;
top: 25%;
background-color: #fff;
margin: auto;
text-align: center;
border-radius: 20rpx;
}
.my-dialog__title{
font-weight: 600;
font-size: 36rpx;
padding: 60rpx 0 20rpx 0;
}
.my-dialog_bd{
padding: 0 40rpx 100rpx;
border-bottom: 1px solid #f5f5f5;
font-size: 36rpx;
line-height: 1.5;
margin-bottom: 0;
color: #85899D;
}
.my-dialog__ft{
display: flex;
justify-content: center;
align-items: center;
height: 100rpx;
line-height: 100rpx;
}
.my-dialog__btn{
flex: 1;
font-size: 36rpx;
font-weight: 600;
}
.r-line{
border-right: 1px solid #f5f5f5;
}
.my-dialog__btn_default{
color: #000000;
}
.my-dialog__btn_primary{
color: #576b95;
}
