javascript实现无法关闭的弹框


Posted in Javascript onNovember 27, 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 类方法定义还是有点区别
Apr 15 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
ES6中数组array新增方法实例总结
Nov 07 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
js格式化时间的简单实例
Nov 27 #Javascript
浅谈jquery页面初始化的4种方式
Nov 27 #Javascript
js实现页面刷新滚动条位置不变
Nov 27 #Javascript
Javascrip实现文字跳动特效
Nov 27 #Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 #Javascript
Angularjs之filter过滤器(推荐)
Nov 27 #Javascript
Web前端开发之水印、图片验证码
Nov 27 #Javascript
You might like
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python中的choice()方法使用详解
2015/05/15 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
三方股东合作协议书
2014/10/28 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2015年除四害工作总结
2015/07/23 职场文书
工伤调解协议书
2016/03/21 职场文书