前端如何实现一个类似淘宝中的运营弹窗效果，看这里！

最近在做前端页面的开发，项目中有个简单的需求，要实现一个类似下图中的运营弹窗效果。

众所周知，运营活动一直是各公司的重点工作，弹窗作为重要的活动引导方式，已经渗透到了用户的各个行为链路中。关于运营弹窗更多的分析，可以参考这篇文章：blog.csdn.net/weixin_3963…

使用了Vue框架开发，从中抽取了弹窗部分。话不多说，上代码：

<template>
    <div vlass = "home">
        <div v-if = "isShowCard">
            <div class="advertise">
                <img class = "img" :src="adver_img" alt="">
                <img class = "img_set" :src="adver_set" @click="clickSet" alt="">
                <i class = "shut" @click = "closeCard"></i>
            </div>
            <div class = "mask" ></div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                adver_img: "../images/advertise.png",
                adver_set: "../images/set.png",
                isShowCard: false  // 默认不展示
            };
        },
        created(){
            // 请求服务端查看是否展示弹窗
            // 请求服务端需要展示的营销图
        }
        methods:{
            clickSet(){
                this.isShowCard = false;        
                this.$router.push(XXX);  //跳转到指定页面  
            },
            closeCard(){
                this.isShowCard = false;
                // 此次可添加是否一天只展示一次逻辑所需的标志
            }
        }
    }
</script>
<style lang="less" scoped>
    .mask {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        margin: 0, 0, 0, 0;
        z-index: 10;
    }
    .advertise {
        position: fixed;
        width: 5.2rem;
        height: 7rem;
        top: 3.31rem;
        left: 50%;
        transform: translate(-50%, 0%);  // 控制居中显示
        z-index: 20;                     
    }
    .img{
        position: absolute;
        width: 5.2rem;
        height: 6.2rem;
        border-radius: 0.12rem;
        z-index: 30;
    }
    .img_set{
        position: absolute;
        width: 2.4rem;
        height: 0.64rem;
        top: 5rem;
        left: 50%;
        z-index: 40;
        transform: translate(-50%, 0%);
    }
    .shut{
        position: absolute;
        width: 0.42rem;
        height: 0.42rem;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url("../images/close.png") no-repeat 50%;
        background-size: 42px 42px;
    }
</style>