大家都见过某度中的恶意广告，你关闭了又出来了！为何，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. SQL注入

    @org.junit.Test public void testLogin() { CardDAO cd=new CardDAO(); if(cd.dengru("' or 1 = 1--& ...

  2. SSIS 数据源组件的External Metadata和Advanced Property

    1,SSIS的组件属性ValidateExternalMetadata 如果一个Destination组件使用的是上游创建的staging table,那么必须设置 ValidateExternalM ...

  3. Sql Server系列：Update语句

    1 UPDATE语法结构 [ WITH <common_table_expression> [...n] ] UPDATE [ TOP ( expression ) [ PERCENT ] ...

  4. ExtJs布局详解

    序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...

  5. 用bootstrap实现多张图片手动轮回

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAJoCAIAAABHhBX4AAAgAElEQVR4nOzdZXdcV7rg8fmIM2vm3r

  6. Android标题栏上添加多个Menu按钮

    最近项目中碰到要在Android Menu旁边再添加一个按钮,而不是点击menu按钮然后在弹出一些选项. MainActivity代码: public class MainActivity exten ...

  7. ECMAScript5之StrictMode

    ECMAScript5引入一个严格模式的概念(Strict Mode). 它的作用就是不让Javascript的容错那么高,让我们对编写代码的规范要求高一点. 比如,当我们使用严格模式编写JavaSc ...

  8. Cookbook of QUnit

    本篇文章是QUnit的简介,可以作为很好的入门教程.文章原址 介绍 自动化测试时软件开发过程中必不可少的一部分,而单元测试则是自动化测试的最为基本的一块,软件的每一个组件, 每一个功能单元都需要经过不 ...

  9. RMAN Catalog创建、配置和管理

    环境:RHEL6.4 + Oracle 11.2.0.4 一.创建数据库catdb 1.1 官档的建库脚本示例 1.2 根据我实际环境修改如下项 1.3 创建必要目录并赋予权限 1.4 执行脚本建库 ...

  10. Linux服务器（Ubuntu14.04）添加远程连接VNC Server

    1.打开终端输入:sudo apt-get install xrdp,   2. sudo apt-get install vnc4server ,  3. sudo apt-get install ...