小程序自定义模态框model

作者: O人心 | 来源:发表于2021-03-03 19:33 被阅读0次

自定义模态框，点击左侧模态框可以关闭显示

1.png

// html
<div class="modal" :class="timeShow?'modal_show':'modal_hide'">
    <div class='modal_cancel' @click='modelCancel'></div>
    <ul class='modal_container'>
        // 内容
    </ul>
</div>

data(){
    return{
        timeShow:false
    }
},
methods:{
    modelCancel() {
    this.timeShow = !this.timeShow;
},
}

// css
  .modal_show {
    display: block;
  }
  .modal_hide {
    display: none;
  }
  .modal {
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
  .modal_cancel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .modal_container {
    position: absolute;
    left: 0;
    top: 0rpx;
    width: 100%;
    height: auto;
    background: #fff;
  }