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