CSS实现遮罩层

短命女 2022-05-26 13:44 434阅读 0赞 
  1. <div id="main">
  2.       <button @click="open">open</button>
  4.       <div class="box" v-if="vm.dialogShow">
  5.         <div id="dialog" style="margin-left: 50px" @click="close">close</div>
  6.       </div>
  7. </div>
  9. data(){
  10.       return {
  11.         vm:{
  12.           dialogShow:false
  13.         }
  14.       }
  15.     },
  16.     methods:{
  17.       open(){
  18.         this.vm.dialogShow = true
  19.       },
  20.       close(){
  21.         this.vm.dialogShow = false
  22.       }
  23.     }
  28. #main{
  29.     width: 100%;
  30.     height: 100%;
  31.   }
  32.   #dialog{
  33.     border-radius: 15px;
  34.     text-align: center;
  35.     width: 50%;
  36.     height: 50%;
  37.     position: absolute;
  38.     top: 0;
  39.     right: 0;
  40.     bottom: 0;
  41.     left: 0;
  42.     margin: auto;
  43.     background-color: white;
  44.   }
  45.   .box{
  46.     width: 100%;
  47.     height: 100%;
  48.     position: fixed;
  49.     top: 0;
  50.     left: 0;
  51.     background: rgba(0,0,0,0.3);
  52.   }

70

发表评论

表情：
评论列表 （有 0 条评论，434人围观）

还没有评论，来说两句吧...

相关阅读