JavaScript实现广告弹窗效果

时间：2021-05-26

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章