专栏首页kyle的专栏关于弹窗广告—定时器、遮罩层

关于弹窗广告—定时器、遮罩层

今天在家里办公,大学同学发了个消息,说在外面谈客户,客户的网站出了问题,需要帮忙处理下。

与大学同学沟通过后,客户要求进入网站首页的用户会有一个弹框,要求用户观看某个广告,若用户点击取消按钮模态框消失,几秒后模态框再次出现。若想要模态框永远消失,需要用户点击观看广告

分析需求

分析一下这个需求,再次出现应该想到js计时器,js计时器分setInterval()和setTimeout,很显然用户的需求不是有规律的循环,所以这里会用到setTimeout,计时器会有一个数字类型的返回值,在使用结束之后记得清除。涉及到模态框、遮罩层,则会有水平垂直居中的问题。

效果图

点击前

点击后

上代码

js部分

const modelWrap = document.querySelector('.modelWrap')

const replay = (stop, t = 1000) => {
    modelWrap.style.display = 'none'
    if (stop) return false
    const num = setTimeout(() => {
        modelWrap.style.display = 'flex'
        clearTimeout(num);
    }, t)
}

const modelWrapEvent = modelWrap.addEventListener('click', (e) => {
    switch (e.target.className) {
        case "close":
            replay();
            break;
        case "watchAd":
            replay(true);
            break;
        default:
            console.log('Sorry, we are out of');;
    }
})

html部分

<div>我是页面我是页面</div>
<div class="modelWrap">
    <div class="content fadeIn">
        小广告小广告
        <button class="watchAd">观看广告</button>
        <buttton type="button" class="close">关闭</buttton>
    </div>
</div>

css部分

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.modelWrap {
    width: 100%;
    height: 100%;
    background: rgb(150, 148, 148, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
}

.modelWrap .content {
    width: 200px;
    height: 200px;
    background: #4282D3;
    position: relative;
}

.modelWrap .close {
    background: #7D71D8;
    position: absolute;
    top: 0;
    right: 0;
}

.watchAd {
    position: absolute;
    bottom: 30px;
}

最后我们再给这个弹框加上一个淡入的效果

.fadeIn {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用于列表下拉加载loading动画

    _kyle
  • 删除链表中的节点

    请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点。传入函数的唯一参数为 要被删除的节点 。

    _kyle
  • 3的幂

    给定一个整数,写一个函数来判断它是否是 3 的幂次方。如果是,返回 true ;否则,返回 false 。

    _kyle
  • CSS StickyFooter——当内容不足一屏时footer紧贴底部

    一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

    IMWeb前端团队
  • CSS StickyFooter——当内容不足一屏时footer紧贴底部

    一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

    IMWeb前端团队
  • 帅地给你总结了这份高频地算法解题技巧,助你更快速着解题!

    对于算法技巧,之前的文章也写过一些算法技巧,不过相对零散一些,今天我把之前的很多文章总结了下,并且通过增删查改,给大家总结一些常用的算法解题技巧,当然,这些也不...

    帅地
  • JavaScript数据结构(3-1):单向链表与双向链表——单向链表篇

    在我学习这些数据结构的时候,曾经问我的同伴在生活中有没有类似的概念。我所听到的例子是购物清单和火车。但是我最终明白了,这些类比是不准确的,购物清单更类似队列,火...

    疯狂的技术宅
  • 你必须知道的指针基础-3.指针的移动及指针的危险

      指针每次加一就是指针向前移动指针类型对应的字节数。下面通过一个int指针来指向一个int数组,看看指针的加法运算到底是个什么鬼?

    Edison Zhou
  • TextCNN的PyTorch实现

    本文主要介绍一篇将CNN应用到NLP领域的一篇论文 Convolutional Neural Networks for Sentence Classificat...

    mathor
  • python: center、ljust、rjust 函数

    JNingWei

扫码关注云+社区

领取腾讯云代金券