大家都见过某度中的恶意广告，你关闭了又出来了！为何，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. PHP分布式中Redis实现Session

    方法一:找到配置文件php.ini,修改为下面内容,保存并重启服务 session.save_handler = redis session.save_path = "tcp://127.0 ...

  2. Spark中决策树源码分析

    1.Example 使用Spark MLlib中决策树分类器API,训练出一个决策树模型,使用Python开发. """ Decision Tree Classifica ...

  3. Unity事件

    unity3d事件函数整理,事件,回调函数,消息处理 Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Star ...

  4. 从零开始编写自己的C#框架（6）——SubSonic3.0插件介绍（附源码）

    前面几章主要是概念性的东西为主,向初学者们介绍项目开始前的一些知识与内容,从本章开始将会进入实操阶段,希望跟着本系统学习的朋友认真按说明做好每一步操作(对于代码最好是直接照着文档内容在你的IDE中打一 ...

  5. 45 个非常有用的 Oracle 查询语句

    ​ 这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快 ...

  6. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  7. 1Z0-053 争议题目解析607

    1Z0-053 争议题目解析607 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 607.Examine the following scenario: -Database is ...

  8. Cesium原理篇：7最长的一帧之Entity(上)

    之前的最长的一帧系列,我们主要集中在地形和影像服务方面.简单说,之前我们都集中在地球是怎么造出来的,从这一系列开始,我们的目光从GLOBE上解放出来,看看球面上的地物是如何渲染的.本篇也是先开一个头, ...

  9. .net基本数据类型操作

    代码编写的过程中,较多的会涉及到基本数据类型的使用和定义,在项目中,对于类型的判定和类型间的相互转换,有时也较为的麻烦,先提供几种基本数据类型的判断方法: 1.判断对象是否为Int32类型的数字: / ...

  10. SQL Server利用递归把所有【子部门员工】汇总到【一级根节点部门】

    前言 说起这个需求,有点反常规,左边是组织机构树,右边是组织机构对应的员工列表.点击左侧组织机构时传一个组织机构ID,然后查询该组织机构以及其所属的一级节点,如果有部门直属单击节点组织机构,则挂出来员 ...