CSS实现遮罩层

短命女 2022-05-26 13:44 501阅读 0赞

<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);
      }

![70][]

[70]: /images/20220526/754dcf8b08854818a91fec9e79f90627.png

发表评论取消回复

表情：

评论列表（有 0 条评论，501人围观）

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

相关阅读

相关 css 弹出遮罩层样式

css 弹出遮罩层样式以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一

女爷i/ 2023年02月20日 13:41/ 0 赞/ 26 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 466 阅读

相关 HTML/CSS 遮罩层登录框

HTML/CSS 遮罩层登录框代码： <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年12月31日 13:19/ 0 赞/ 351 阅读

相关 css 实现鼠标移入图片显示遮罩层

css 实现鼠标移入图片显示遮罩层代码如下 <!DOCTYPE html> <html> <head> <meta char

约定不等于承诺〃/ 2022年12月29日 06:34/ 0 赞/ 458 阅读

相关 uniapp实现一个遮罩层

.mark{ position:absolute; height: 500rpx; color:

亦凉/ 2022年10月19日 12:43/ 0 赞/ 788 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 456 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 502 阅读

相关 css实现缕空遮罩层

最新更新时间：2019年05月13日13:41:01 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面镂空遮罩层、页面镂空遮罩

柔情只为你懂/ 2022年02月01日 04:29/ 0 赞/ 489 阅读

相关 css 遮罩层简单应用

html <input id="btnshow" type="button" value="Show" onclick="showdiv();"> <div

红太狼/ 2021年10月14日 06:32/ 0 赞/ 543 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 663 阅读