小程序-自定义弹窗

<view bindtap="showSelectUserModal">点击显示弹窗</view>


<view class="modal-mask" bindtap="hideSelectUserModal" catchtouchmove="preventTouchMove" hidden="{{!showSelectUser}}"></view>
  <view class="modal-dialog" hidden="{{!showSelectUser}}">
    <view class="select-user-dialog">
      <view class="tips">检测到您当前的手机号关联了多个用户，请选择本次登录用户</view>
      <view class="user-header">
        <text class="t">用户名</text>
        <text class="d">所在组织</text>
      </view>
      <view class="footer">
        <button class="btn-cancel" bindtap="hideSelectUserModal">取消</button>
        <button class="btn-confirm" bindtap="">确定</button>
      </view>
    </view>
  </view>

1、wxml，弹框需要显示的内容

2、wcss 样式表

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.45;
  overflow: hidden;
  z-index: 9000;
}
 
.modal-dialog {
  box-sizing:border-box;
  width: 630rpx;
  height:auto;
  overflow: hidden;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin: 0 auto;
  z-index: 9999;
  background: #fff;
  border-radius: 20rpx;
}

3、ts

hideSelectUserModal(){
    this.setData({
      showSelectUser: false,
    });
  },
  showSelectUserModal(){
    this.setData({
      showSelectUser: true,
    });
  },

显示效果：