效果图
wxml
<view class="toastbd" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="mytoast" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
<view class='toasttitlebox'>
<text class='toasttitle'>提示</text>
<view class='toastback' bindtap='toastback'>返回</view>
</view>
<view style="width:100%" class='toastcontent'>
sdfsdf sdfsdf sdfsdf sdfsdf
</view>
<view style="width:94%" class='toastbtn' bindtap='toastback'>确定</view>
</view>wxss
/* 弹窗样式 */
.toastbd{
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 999;
opacity: 0.5;
top: 0;
left:0;
}
.mytoast{
width: 80%;
position: fixed;
top:300rpx;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
padding: 55rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.toasttitlebox{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 15rpx;
width: 100%;
}
.toasttitle{
font-size: 42rpx;
}
.toastback{
text-align: center;
color: #f0a500;
font-size: 30rpx;
}
.toastcontent{
width: 100%;
justify-content: center;
flex-direction: row;
display: flex;
margin: 40rpx 0rpx;
}
.wish_put{
width: 100%;
border: #ededef 1rpx solid;
background-color: #f6f7fb;
border-radius: 12rpx;
padding: 30rpx 20rpx;
margin: 20rpx 0rpx;
}
.toastbtn{
background-color: #fec600;
text-align: center;
border-radius: 50rpx;
padding: 25rpx;
color: white;
}js
Page({
data: {
showModal: true
},
toastback:function(){
this.setData({
showModal:false
})
}
})
标签：flex,center,自定义,color,微信,100%,width,background,弹窗 From： https://www.cnblogs.com/treeofb/p/17474189.html