[转]CSS实现遮罩层

<div id="main">      <button @click="open">open</button>       <div class="box" v-if="vm.dialogShow">        <div id="dialog" style="margin-left: 50px" @click="close">close</div>      </div></div>

data(){      return {        vm:{          dialogShow:false        }      }    },    methods:{      open(){        this.vm.dialogShow = true      },      close(){        this.vm.dialogShow = false      }    }

 

#main{    width: 100%;    height: 100%;  }  #dialog{    border-radius: 15px;    text-align: center;    width: 50%;    height: 50%;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    background-color: white;  }  .box{    width: 100%;    height: 100%;    position: fixed;    top: 0;    left: 0;    background: rgba(0,0,0,0.3);  }

 

 

---------------------
作者：mannix_lei
来源：CSDN
原文：https://blog.csdn.net/mannix_lei/article/details/80180809
版权声明：本文为作者原创文章，转载请附上博文链接！