javascript实现无法关闭的弹框
大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你
HTML
<body> <h3class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <divid="middleBox"> <ahref="javascript:;"class="close_btn"id="closeBtn"><imgsrc="images/close_icon.png"alt=""class="will_close"></a> <ulclass="parent_btn"> <li><ahref="/"class="btn_tel"><imgsrc="images/icon_tel.gif"alt=""><span>拨打电话</span></a></li> <li><ahref="/"class="btn_chat"><imgsrc="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,"MicrosoftYaHei",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:0auto; 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; } #middleBoxa{ overflow:hidden; } #middleBoxaimg,#middleBoxaspan,#middleBoxulli{ float:left; } #middleBoxaspan{ font-size:16px; color:#fff; } #middleBoxul{ overflow:hidden; } #middleBoxulli{ width:130px; } #middleBoxullia{ line-height:50px; display:block; padding-left:5px; } #middleBoxulliaimg{ 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
/** *CreatedbyAdministratoron2016/7/19. */ varadv={ 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(); };
以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持毛票票!