模態對話方塊在彈出的時候，使用者如果不關閉這個對話方塊，是無法對其他視窗進行操作的。 

思路：需要一個遮蓋層（mask）和一個對話方塊（modal）。 

1）模板wxml

<text bindtap="introModal">展覽介紹</text>
<view class="mask" wx:if="{{showModal}}">
    <view class="modal" wx:if="{{showModal}}">
      <image class="closeIcon" bindtap="closeModal" src="/images/icon/close.png"></image>
      <text>巴洛克時期的西里西亞——波蘭弗羅茨瓦夫國立博物館館藏精品展</text>
    </view>
</view>
 

2）指令碼js

Page({
  data: {
    showModal: false
  },
  introModal: function() {
    this.setData({
      showModal: true
    })
  },
  closeModal: function() {
    this.setData({
      showModal: false
    })
  }
})

3）樣式wxss

.mask{
  position: fixed;
  width: 100%;
  height: 1334rpx;
  background: rgba(0,0,0,.5);
  display: flex;
  flex-direction: column
  justify-content: center;
}
.modal{
  display: flex;
  flex-direction: column
  position: relative;
  margin: 0 30rpx;
  padding: 20rpx 30rpx 40rpx;
  background: white;
  border-radius: 5px;
  font-size: 26rpx;
  line-height: 46rpx;
}
.closeIcon{
  position: absolute;
  top: 40rpx;
  right: 30rpx;
  width: 30rpx;
  height: 30rpx;
 }
 

4）效果圖

參考資料來自：https://blog.csdn.net/yelin042/article/details/80881618