效果圖

WXML

<view class='popup' wx:if="{{popShow}}">
    <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'>
    </view>
    <!--  彈出層 -->
      <view class='popup_main' id='popup_main' >
    <!--  關閉按鈕 -->
        <view class='close_wrapper'>
          <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image>
        </view>
    <!-- 主要內容 -->
        <view class='pop_list_wrapper'>這裡加入你想加入的內容</view>
      </view>
  </view>
 

WXSS

    .popup {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .popup_main {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 85%;
      transform: translate(-50%, -50%);
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      border: 5px;
      border-radius: 10px;
    }
    .close_wrapper {
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .close_icon {
      width: 16px;
    }

 

JS

 data: {
/** 彈出層 **/
    popShow: false,
}

  /**
   * 彈出層
   */

  // 開啟彈窗
    popupTap: function (e) {
    this.setData({
      popShow: true
    })
  },
  // 關閉彈窗
  closePop: function (e) {
    this.setData({
      popShow: false
    })
  },
  // 這個函式內容為空 用於阻止螢幕滾動
  preventTouchMove: function (e) {
  },