效果圖

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
    })
  }
  })