美文网首页
小程序自定义模态框model

小程序自定义模态框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;
  }

相关文章

网友评论

      本文标题:小程序自定义模态框model

      本文链接:https://www.haomeiwen.com/subject/wircqltx.html