In diesem Artikel wird der Beispielcode von Javascript zum Implementieren eines Popup-Fensters vorgestellt, das nicht geschlossen werden kann.
Jeder hat eine bösartige Werbung auf einer bestimmten Webseite gesehen, und sie kommt nach dem Schließen wieder raus! Warum, JS wird es Ihnen sagen
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();
};Das obige ist der detaillierte Inhalt vonJavascript-Implementierung eines Popup-Box-Beispielcodes, der nicht geschlossen werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
