實現思路

模態對話方塊之所以被叫做“模態”，就是因為在它彈出的時候，使用者如果不關閉這個對話方塊，是無法對其他視窗進行操作的。
那麼這樣一來，我們的思路就很明確了：

1. 構建一個蒙層（mask），使得背景變暗，並且阻止使用者對對話方塊外介面的這裡寫程式碼片點選事件；
2. 構建一個對話方塊，在需要時彈出即可（彈出同時觸發蒙層）。

.wxml：

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg"
 
 wx:if="{{showModal}}">
 <view bindtap="closeMask" class="modal-close">x</view>
 <image src="/assets/images/newer.gif"/>
</view>

<button bindtap="submit">點我彈窗</button>

.wxss：

.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index
 
: 9000;
  opacity: 0.7;
 }
 
 .modalDlg{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
 }

 .modal-close {
   position: fixed;
   top: -30rpx;
   right: -15rpx;
   color: #ffffff;
 }

.js：

Page({

  data: {
    showModal: false
   },
   
   submit: function() {
    
 
this.setData({
    showModal: true
    })
   },
   
   preventTouchMove: function() {
   
   },
   
   closeMask: function() { 
    this.setData({
    showModal: false
    })
   }
})

參考：https://www.jb51.net/article/143440.htm