大家都见过某度中的恶意广告，你关闭了又出来了！为何，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. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  2. 【Win10 应用开发】从前台应用触发后台任务

    有关后台任务的使用,估计大伙伴们不会陌生,而且老周曾经在某文中也简单讲述过.说到后台任务,老周想到了一个问题:有人问,后台任务一定要独立写到一个Runtime组件中吗,能不能写到主项目的代码中? 老周 ...

  3. window下Nodejs的部署

    nodejs http://nodejs.org/#download npm node cli.js install npm -gf //可以安装最新版的NPM node cli.js install ...

  4. A Simple OpenCASCADE Qt Demo-occQt

    A Simple OpenCASCADE Qt Demo-occQt eryar@163.com Abstract. OpenCASCADE have provided the Qt samples ...

  5. Torch学习笔记1--Torch简介

    Torch是什么 Torch是一个由Lua语言开发的深度学习框架,目前支持Mac OS X 和Ubuntu 12及以上,官网 ,github地址. 具有如下特点: 交互式开发工具 可视化式的工具 第三 ...

  6. SQL Server-数据库架构和对象、定义数据完整性（二）

    前言 本节我们继续SQL之旅,本节我们如题来讲讲一些基本知识以及需要注意的地方,若有不妥之处,还望指出,简短的内容,深入的理解,Always to review the basics. 数据库架构和对 ...

  7. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  8. 百度sdk定位不成功,关闭定位

    公司项目有用到百度地图,登录的时候需要定位一次,获取登录的地址信息,在手机无法连接外网的情况,也就无法访问百度定位服务器的时候,定位的回调函数要30秒以上才能返回结果,于是去仔细查百度api,发现没有 ...

  9. 精彩 .NET 2015

    英文原文:Understanding .NET 2015 Understanding 翻译为了解或理解,对于 .NET 来说,2015 年注定会更加精彩,所以标题就用了"精彩"这个 ...

  10. C# 打印PDF文件之使用不同打印机打印所有页面或部分页面

    C# 打印PDF文件之使用不同打印机打印所有页面或部分页面 最近在逛国外各大编程社区论坛的时候,发现很多人都在问一个关于PDF文件打印的问题:打印时如何选择非默认打印机并设置打印页面的范围.而一般情况 ...