vue中实现灰色遮罩

九点五亿少女的梦

已于 2022-12-12 11:30:07 修改

阅读量477

点赞数

文章标签： vue.js javascript 前端

于 2022-12-12 11:20:10 首次发布

本文链接：https://blog.csdn.net/weixin_44856917/article/details/128284300

版权

在这里插入图片描述

                    <div v-show="dialog" class='popContainer' @@click="hideDialog">
                        <img src="~/Content/jyshi/img/meeting/expect.png" alt="">
                        <div style="margin-top: 58px;">
                            <span class="popContainerText">
                                直播暂未开启，敬请期待！
                            </span>
                        </div>
                    </div>

 data: {
       dialog:true,//false，点击触发的时候改成true就可以显示了
       },
methods: {
       hideDialog() {
           this.dialog = false;
       },

    <style>
        .popContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 999;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: #000000;
            opacity: 0.8;
        }
            .popContainer img {
                z-index:999;
                width: 480px;
                height: 367px;
            }

        .popContainerText {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 13px;
        }
    </style>