大家都見過某度中的惡意廣告，你關閉了又出來了！為何，JS來告訴你
HTML
<body> <h3>無法關閉的彈框，打不死的小強!</h3> <div id="middleBox"> <a href="javascript:;" id="closeBtn"><img src="images/close_icon.png"></a> <ul> <li><a href="/"><img src="images/icon_tel.gif"><span>撥打電話</span></a></li> <li><a href="/"><img src="images/icon_chat.gif"><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();};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。