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();
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。