微信小程序——自定义个性化模态框（附代码）

  <button size="mini" bindtap="showDialogBtn">点击我弹出弹出框</button>
    <view catchtouchmove="preventTouchMove"  class="modal-mask" bindtap='hiddenmodel' wx:if="{{ showModel}}" ></view> 
    <view class='modal-dialog' wx:if="{{ showModel}}">
       <view class='modal-title'>我是标题</view>
       <view class='modal-content'>
         <view> 我是内容</view>
         <view> 我是内容</view>
         <view> 我是内容</view>
        
       </view>
       <view class='modal-footer'>
           <button   bindtap='onCancel' >取消</button>
           <button bindtap='onConfirm' >确定</button>
       </view>
    </view>  

/* 模态框开始 */
.modal-mask{
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 9000;
  top:0;
  left: 0;
  overflow: hidden;
  color: #fff;
}
.modal-dialog{
  width:540rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  z-index: 9999;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #f9f9f9;
  border-radius: 36rpx;
}
.modal-title{
  text-align: center;
  margin: 20rpx 0;

}
.modal-content{
  min-height: 150rpx;
  margin: 50rpx 32rpx;
}
.modal-footer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.modal-footer button::after{
  width: 50%;
  border: none;
  border-radius: 0;
}
.modal-footer button:nth-child(1){
  border-right: 1px solid #eeeeee;
  display: block;
  width: 50%;
}
.modal-footer button{
  width: 50%;
}
/* 模态框结束 */

data: {
    showModel:false,//默认隐藏莫太框
  },
hiddenmodel: function () {
    this.setData({
      showModel: false
    })
  },
  showDialogBtn: function () {
    this.setData({
      showModel: true
    })
  },
  onCancel: function () {
    this.setData({
      showModel: false
    })
  },
  onConfirm: function () {
    this.setData({
      showModel: false
    })
  },
  preventTouchMove: function () {

  },