javascript中的弹框

大家都见过某度中的恶意广告，你关闭了又出来了！为何，JS来告诉你

效果猛戳此处

HTML

<body>
    <h3 class="whiteColor">无法关闭的弹框，打不死的小强!</h3>
    <div 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>
    </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: #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={
    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();
};

 

posted @ 2016-07-19 16:57  逗伴不是瓣  阅读(528)  评论(1)  编辑  收藏  举报