JavaScript实现广告弹窗效果

2019-11-20 09:16:39

字体：大中小

来源：转载

供稿：网友

大家都见过某度中的恶意广告，你关闭了又出来了！为何，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;}

/** * 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();};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：AngularJS利用Controller完成URL跳转

下一篇：谈谈JavaScript中的几种借用方法