微信小程序实现模态对话框

模态对话框在弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。 

思路：需要一个遮盖层（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