自定义小程序showModal对话框

绝地灬酷狼 2022-11-20 09:54 207阅读 0赞

小程序自定义对话框的书写

## html部分 ##

## css ##

/* model弹窗 */
    .modal-mask { 
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.3;
      overflow: hidden;
      z-index: 9000;
      color: #fff;
    }
    
    .modal-dialog { 
      width: 540rpx;
      overflow: hidden;
      position: fixed;
      top: 40%;
      left: 0;
      z-index: 9999;
      background: #f9f9f9;
      margin: -180rpx 105rpx;
      border-radius: 20rpx;
      padding: 30rpx 20rpx 10rpx;
    }
    
    .modal-title { 
      padding: 0rpx 20rpx 10rpx;
      font-size: 36rpx;
      color: #030303;
    }
    
    .modal-content { 
      padding: 10rpx 20rpx 10rpx;
    }
    
    .listItem { 
      padding: 0 20rpx ;
      margin-top: 20rpx;
      box-sizing: border-box;
    }
    
    .dangeColor { 
      color: #EA1932;
    }
    .passColor{ 
      color: #65D580;
    }
    
    .time { 
      font-size: 24rpx;
      text-align: right;
    }
    .passItem:after{ 
      border-bottom: none;
    }

注意: 样式有引用weui的样式,  
地址: [https://github.com/weui/weui-wxss][https_github.com_weui_weui-wxss]

## js ##

data:{ 
     showModelConflict:false
    	
    },
    hideModalC(){ 
     this.setData({ 
        showModelConflict: false
      })
    },
    cancelPass(){ 
     this.hideModalC()
     this.triggerEvent( 'cancelThisMeet', { id: '000'})
    },
    confirmPass(e){ 
      this.hideModalC()
      this.triggerEvent( "comfirmThisMeet", { id: e })
    },

[https_github.com_weui_weui-wxss]: https://github.com/weui/weui-wxss