大家都见过某度中的恶意广告，你关闭了又出来了！为何，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 IDbundle identifier 二设备Device 三开发证书Certificates 证书的概念 数字证书的概念 iOS开发证书 iOS开发证书的根证书 申请 ...

  2. JS数字计算精度误差的解决方法

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...

  3. SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志

    1.IP地址配置不正确: 打开 Microsoft SQL Server 2005配置工具下的SQL Server Configuration Manager,选择MSSQLSERVER协议, 然后双 ...

  4. Building third-party products of OpenCascade

    Building third-party products of OpenCascade eryar@163.com Available distributives of third-party pr ...

  5. 基于X86平台的PC机通过网络发送一个int（32位）整数的字节顺序

    1.字节顺序 字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序.小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处:大端字节序是高字节数据存 ...

  6. Git 冲突合并

    在多人协作开发,经常遇到Git冲突,每次都不大记住命令.所以自己备注一下! git pull 之后有冲突: $ git pullremote: Counting objects: 5, done.re ...

  7. EntityFramework 7 Join Count LongCount 奇怪问题（已修复）

    问题说明: 博客问题纪录 Use EF7, Linq Join Count is error EF7 Code Commit EF7 版本(注意 rc): 旧版本:"EntityFramew ...

  8. java 大数据处理类 BigDecimal 解析

    这两天,由于我的必修课概率论里经常要用到排列组合的计算,感觉很麻烦,加上现代智能手机的计算器是没有这方面功能的. 所以,就自己动手写了个安卓的 排列组合 计算器,用了一天,发现有很大的问题,阶乘达百亿 ...

  9. 浅析Openflow

    这应该算是我在博客园的第一篇技术性的文章. OH,不,这不是一篇技术性的文章,只是一篇很好玩的浅显分析接触到的技术的文章.只是个人的理解,并没有任何的代码和执行的操作.初次带来的,是从08年开始火起来 ...

  10. windows配置xhprof，PHP性能分析工具

    本来以为配置这么一个工具不会费很大的力气,后面发现完全不是. 一.小插曲 早上显示电脑不能显示虚拟目录下的所有域名,但是能打开localhost,数据库连接也不行了.这个问题纠缠了我一个上午.对了还有 ...