关于弹窗广告—定时器、遮罩层
时间:2022-07-23
本文章向大家介绍关于弹窗广告—定时器、遮罩层,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在家里办公,大学同学发了个消息,说在外面谈客户,客户的网站出了问题,需要帮忙处理下。
与大学同学沟通过后,客户要求进入网站首页的用户会有一个弹框,要求用户观看某个广告,若用户点击取消按钮模态框消失,几秒后模态框再次出现。若想要模态框永远消失,需要用户点击观看广告
分析需求
分析一下这个需求,再次出现应该想到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;
}
}
- 算法08 五大查找之:二叉排序树(BSTree)
- Struts2【UI标签、数据回显、资源国际化】
- mybatis-plus思维导图,让mybatis-plus不再难懂
- 10(01)总结形式参数,包,修饰符,内部类
- Java的参数传递是值传递还是引用传递
- 通过shell脚本来得到不稳定的执行计划(r4笔记第40天)
- Struts2【OGNL、ValueStack】
- 如何用Python爬虫实现图片自动下载?
- Hibernate【查询详解、连接池、逆向工程】
- Hibernate【缓存】知识要点
- MySQL 存储过程的简单使用
- Hibernate【与Spring整合】
- JAVA容器-自问自答学ArrayList
- 10(02)总结形式参数,包,修饰符,内部类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深度学习中7种最优化算法的可视化与理解
- 【基础详解】手磕实现 CNN卷积神经网络!
- 直播间源码android音视频开发
- 批量转化字符编码
- JAR项目部署
- java基础:枚举(你木有见过的船新版本)
- elasticSearch学习(九)
- Linux工具---iptraf 实时地监视网卡流量
- Linux工具---ipcalc简单的IP地址计算器
- 七、玩转Git三剑客-使用GitHub进行团队协作
- 关于mysql的join
- 微信公众号接入智能聊天机器人
- SAP UI5 Diagnostics工具里一个使用面向切片编程(AOP)的一个例子
- SAP CDS view自学教程之九:cube view和query view的实现原理
- 一点多发FTP客户端设计