JavaScript实现广告弹窗效果


Posted in Javascript onAugust 09, 2016

大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你

HTML 

<body>
  <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3>
  <div id="middleBox">
    <a href="javascript:;" class="close_btn" id="closeBtn"><img src="images/close_icon.png" alt="" class="will_close"></a>
    <ul class="parent_btn">
      <li><a href="/" class="btn_tel"><img src="images/icon_tel.gif" alt=""><span>拨打电话</span></a></li>
      <li><a href="/" class="btn_chat"><img src="images/icon_chat.gif" alt=""><span>快速留言</span></a></li>
    </ul>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
}
a { -webkit-touch-callout: none; text-decoration: none }
:focus { outline: 0 }
body{
  font-family: Helvetica, STHeiTi, "Microsoft YaHei", sans-serif;
  color: #595757;
  background-color: #fff;
  outline: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{
  border: none;
}
.whiteColor{
  color: #fff;
  text-align: center;
}
.flex_parent{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex_child{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/*middle_box*/
body{
  position: relative;
  background-color: #272822;
}
#middleBox{
  width: 260px;
  height: 248px;
  margin: 0 auto;
  background-image: url(../images/irfa_dog.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  /*水平垂直居中*/
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -124px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 100;
}
.close_btn{
  display: block;
  overflow: hidden;
  position: absolute;
  top: -10px;
  right: -10px;
}
.will_close{
  width:32px;
}
#middleBox a{
  overflow: hidden;
}
#middleBox a img,#middleBox a span,#middleBox ul li{
  float: left;
}
#middleBox a span{
  font-size: 16px;
  color: #fff;
}
#middleBox ul{
  overflow: hidden;
}
#middleBox ul li{
  width: 130px;
}
#middleBox ul li a{
  line-height: 50px;
  display: block;
  padding-left: 5px;
}
#middleBox ul li a img{
  width:30px;
  margin-right: 2px;
  margin-top: 8px;
  margin-left: 5px;
}
.btn_tel{
  background-color: #F92665;
  border-bottom-left-radius: 10px;
}
.btn_chat{
  background-color: #1EA362;
  border-bottom-right-radius: 10px;
}
.parent_btn{
  position: absolute;
  left: 0;
  bottom: 0;
}

JS 

/**
 * Created by Administrator on 2016/7/19.
 */
var adv={
  div:null,
  timer:null,
  btn:null,
  init:function(){
    this.btn=document.getElementById("closeBtn");
    this.div=document.getElementById("middleBox");
    this.btn.onclick=this.displayNone;
  },
  displayBlock:function(){
    adv.div.style.display="block";
  },
  displayNone:function(){
    adv.div.style.display="none";
    timer=setTimeout(function(){
      adv.displayBlock();
    },3000);
  }
};
window.onload=function(){
  adv.init();
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
Express的路由详解
Dec 10 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 #Javascript
Backbone View 之间通信的三种方式
Aug 09 #Javascript
Backbone中View之间传值的学习心得
Aug 09 #Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 #Javascript
jQuery 生成svg矢量二维码
Aug 09 #Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 #Javascript
浅谈js基本数据类型和typeof
Aug 09 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php 基础函数
2017/02/10 PHP
学习jquery之一
2007/04/27 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
JS的数组迭代方法
2015/02/05 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Vue中props的使用详解
2018/06/15 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
技校生自我鉴定
2013/12/08 职场文书
运动会广播稿400字
2014/01/25 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016大学军训心得体会
2016/01/11 职场文书