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

效果猛戳此处

HTML

<body>

    <h3 class="whiteColor">无法关闭的弹框，打不死的小强!</h3>

    <div id="middleBox">

        <a href="javascript:;" class="close_btn" id="closeBtn"><img src="data:images/close_icon.png" alt="" class="will_close"></a>

        <ul class="parent_btn">

            <li><a href="/" class="btn_tel"><img src="data:images/icon_tel.gif" alt=""><span>拨打电话</span></a></li>

            <li><a href="/" class="btn_chat"><img src="data:images/icon_chat.gif" alt=""><span>快速留言</span></a></li>

        </ul>

    </div>

</body>

CSS

*{

    margin:;

    padding:;

    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:;

    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:;

    -moz-box-flex:;

    -webkit-flex:;

    -ms-flex:;

    flex:;

}

/*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:;

}

.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:;

    bottom:;

}

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();

};

javascript中的弹框的更多相关文章

  1. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  2. Angular中sweetalert弹框的使用详解

    最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweeta ...

  3. 操作JavaScript的Alert弹框

    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

  4. 杨校老师课堂之JavaScript右下角广告弹框教程

    案例制作思路: 1.先制作界面 添加一个盒子包含一个按钮,使盒子绝对定位在右上角 添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子 顶端盒子因为是属于大盒子内部的存在,所以宽 ...

  5. 解决 主界面mainactivity 中fragment弹框把下面tab选项卡 顶上去的方案

     android:windowSoftInputMode="adjustPan"            android:configChanges="screenSize ...

  6. javascript中简单提示框

    CSS部分 .help-tip{ width: 340px; border:1px solid #A0A0A0; background-color: #F8F8F8; border-radius: 5 ...

  7. ios UIWebView自定义Alert风格的弹框

    之前开发过一个App,因为公司之前写好了网页版的内容和安卓版本的App,我进去后老板要求我ios直接用网页的内容,而不需要自己再搭建框架.我一听,偷笑了,这不就是一个UIWebView吗?简单! 但是 ...

  8. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  9. maximo弹框设置新的功能测试总结

    先介绍下弹框前的准备工作: 1.签名选项——定义系统中可授权的所有功能的唯一标识.定义签名选项是为了授权而已.定义的签名名要和相应的bean类中的方法一致. 2.签名选项中的功能实现,一般都在APPB ...

随机推荐

  1. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  2. Cnblogs支持Latex及测试

    为了方便后续机器学习文章的书写,因此在cnblogs中设置了支持Latex. 设置: 在"后台管理"中"页首Html代码"中加入如下代码: <script ...

  3. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  4. log4net 记录MVC监控日志

    由于MVC自身的特点,可以让我们记录每一个Controller下Action的执行时间以及View视图渲染完成的时间,本文采用log4net记录MVC每个Action的执行时间和View视图渲染完成时 ...

  5. 关于近段时间论坛型APP 的一段舍弃

    一直以为缓存务必要做的很好,好到什么程度呢,我曾这样想,用户在下滑数刷新的时候也要做到,先加载久缓存再加载新的,同时只改变旧的某些项.这样的想法真的很好!好到我花费了三天去设计数据库和服务器的 php ...

  6. 微信公众平台开发（二）——access_token、日志

    一.access_token 1)两种access_token,网页授权access_token和普通access_token 1.微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后, ...

  7. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  8. SpringMVC 参数注入

    写一个web service, 总是400. 说是request有问题,server不识别.然而检查了很多次都没问题.最终问题指向spring对参数的解析和注入. 一个controller中可以自定义 ...

  9. Net设计模式实例之建造者模式(Builder Pattern)

    一.建造者模式简介(Brief Introduction) 建造者模式(Builder Pattern),将一个复杂对象的构建与它的表示分离,使的同样的构建过程可以创建不同的表示. 建造者模式的优点是 ...

  10. Xamarin.Android和UWP之MVVM的简单使用(一)

    0x01 前言 就目前而言,MVVM可以说是挺流行的,无论是web端还是移动端,web端的主要代表angularjs,avalonjs等, 移动端(xamarin,uwp)的代表应该是mvvmligh ...