Maison >interface Web >js tutoriel >Implémentation Javascript d'un exemple de code de boîte contextuelle qui ne peut pas être fermé
Cet article partage un exemple de code javascript pour implémenter une boîte contextuelle qui ne peut pas être fermée. Les amis intéressés peuvent y jeter un œil
Tout le monde a vu une publicité malveillante sur une certaine page Web, et elle arrive. à nouveau après l'avoir fermé ! Pourquoi, JS vous le dira
HTML
<body> <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <p 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> </p> </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={ p:null, timer:null, btn:null, init:function(){ this.btn=document.getElementById("closeBtn"); this.p=document.getElementById("middleBox"); this.btn.onclick=this.displayNone; }, displayBlock:function(){ adv.p.style.display="block"; }, displayNone:function(){ adv.p.style.display="none"; timer=setTimeout(function(){ adv.displayBlock(); },3000); } }; window.onload=function(){ adv.init(); };
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!