Everyone has seen malicious advertisements in a certain degree, and you close it and come out again! Why, JS will tell you
HTML
<body> <h3>The unclosed pop-up box, the undead Xiaoqiang!</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>Call</span></a></li> <li><a href="/"><img src="images/icon_chat.gif"><span>Leave a quick message</span></a></li> </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: #ffff; 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; /*horizontal vertical centering*/ 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: #ffff;}#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();};The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.