开发中有时候会需要最出弹框后，过几秒自动消失的效果，下面给大家分享一下我自己做的一个小案例。

案例中的弹框使用的是bootstrap里面的模态框，实现自动消失则用的是js中的setInterval方法。该弹框使用了jquery-ui中的draggable方法，可拖动。

目录结构如下：

下面是案例代码：

demo.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>js弹框3秒后自动消失</title>

        <link rel="stylesheet" type="text/css" href="./js/bootstrap/css/bootstrap.css"/>

        <link rel="stylesheet" type="text/css" href="./css/demo.css"/>

    </head>

    <body>

        <button onclick="showModal()">点击弹出模态框</button>

        <div class='modal my-modal-alert' id='my-modal-alert'>

            <div class='modal-dialog boxBodySmall'>

                <div class='modal-content'>

                    <div class='modal-header boxHeader'>

                        <button type='button' class='close boxClose' data-dismiss='modal'>

                            <span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span>

                        </button>

                        <h4 class='modal-title boxTitle' id='modal-title'>模态框</h4>

                    </div>

                    <div class='modal-body' id='modal-body-alert'>

                        <div id='modal_message'>js弹框自动消失案例</div>

                        <span id='num'></span>

                    </div>

                    <div class='modal-footer boxFooter' id='modal-footer'>

                        <button type='button' class='btn btn-default boxButton' data-dismiss='modal'>关闭</button>

                        <button type='button' class='btn btn-primary boxButton'>保存</button>

                    </div>

                </div>

            </div>

        </div>

        <script src="./js/jquery/jquery-1.11.2.js"></script>

        <script src="./js/bootstrap/js/bootstrap.min.js"></script>

        <script src="./js/jquery-ui/jquery-ui.min.js"></script>

        <script>

            var clearFlag = 0;

            var count = 3;//设置3秒后自动消失

            var showModal = function(){

                $("#my-modal-alert").toggle();//显示模态框

                $("#my-modal-alert").draggable({//设置模态框可拖动（需要引入jquery-ui.min.js）

                    handle: ".modal-header"

                });

                clearFlag = self.setInterval("autoClose()",1000);//每过一秒调用一次autoClose方法

            }

            var autoClose = function(){

                if(count>0){

                    $("#num").html(count + "秒后窗口将自动关闭");

                    count--;

                }else if(count<=0){

                    window.clearInterval(clearFlag);

                    $("#num").html("");

                    $("#my-modal-alert").fadeOut("slow");

                    count = 3;

                    $("#my-modal-alert").toggle();

                }

            }

        </script>

    </body>

</html>

demo.css

/*弹框本身(大)*/

.my-modal-alert .boxBodyBig{

    width:496px;

    height: 418px;

}

/*弹框本身(小)*/

.my-modal-alert .boxBodySmall{

    width:412px;

    height: 418px;

}

/*弹框头*/

.my-modal-alert .boxHeader{

    background-color: #f6f6f6;

    border-bottom: #e5e5e5 1px;

    height: 48px;

}

/*弹框标题*/

.my-modal-alert .boxTitle{

    background-color: #f6f6f6;

    color:#333333;

    font-family:"SimHei";

    font-size: 16px;

}

/*弹框头部分右侧关闭按钮*/

.my-modal-alert .boxClose{

}

.my-modal-alert .boxClose:hover{

    color: #ff7800;

}

/*弹框按钮的父级元素块*/

.my-modal-alert .boxFooter{

    margin: auto;

    text-align: center;

    padding:24px 15px 24px 15px;

    margin:0px 15px 0px 15px;

}

/*弹框按钮*/

.my-modal-alert .boxButton{

    font-family:"SimHei";

    background-color:#ff7800;

    width: 70px;

    height: 30px;

    color:white;

    text-align:center;

    line-height: 1;

}

/*已下为选用*/

/*弹框主题label框*/

.my-modal-alert .boxLabel{

    width:80px;

    font-size: 14px;

    font-family:'SimHei';

    color: #999999;

}

/*文本框*/

.my-modal-alert .boxInput{

    width:176px;

    font-size: 14px;

    color: #333333;

}

/*纯文本*/

.my-modal-alert .boxText{

    color:#ff7800;

    font-family:'SimHei';

    font-size: 12px;

}

.my-modal-alert .boxTextarea{

    font-size: 12px;

}

.my-modal-alert .modal-body{

    width: 400px;

    height: 100px;

    text-align: center;

}

.my-modal-alert .modal_message{

    margin-top: 20px;

}

注意项：

1、bootstrap依赖于jquery,引入bootstrap前需要引入jquery

js弹框3秒后自动消失的更多相关文章

  1. jq弹框 （1）内容自适应宽度 2（内容框显示，几秒后自动消失）

      <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...

  2. js实现网页多少秒后自动跳转到指定网址

    在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: ...

  3. Axure实现提示文本单击显示后自动消失的效果

    Axure实现提示文本单击显示后自动消失的效果 方法/步骤     如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. ...

  4. 【JS】【3】标签显示几秒后自动隐藏

    $("#XXX").show().delay(2000).hide(0); 2000,0:可选,速度,(毫秒:"slow":"fast") ...

  5. JS n秒后自动跳转实例

    <p><a href="<?php echo base_url();?>usercenter/index" id="message" ...

  6. js弹框处理

    # -*- coding:utf-8 -*- """ js弹框处理 """ from selenium import webdriver d ...

  7. 两种方法实现js页面隔几秒后跳转，及区别

    这里需要用到window的两个对象方法,setInterval()和setTimeout() 一. 区别: 1.  setInterval(code,millisec)  周期性(millisec单位 ...

  8. axure如何实现提示框3s后自动消失

    本示例基于axure8 实现 1.先做两个元件,一个按钮,一个提示框 2.将弹框“发布成功提示”设置为,页面载入时隐藏,这样预览页面时,该弹框是隐藏状态 3.给按钮添加交互样式,如下: 4.预览,点击 ...

  9. 3秒后自动跳转页面【js】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. (转)RVA-相对虚拟地址解释

    RVA是相对虚拟地址(Relative Virtual Address)的缩写,顾名思义,它是一个“相对”地址,也可以说是“偏移量”,PE文件的各种数据结构中涉及到地址的字段大部分都是以RVA表示的. ...

  2. Spark性能测试报告与调优参数

    1.代码中尽量避免group by函数,如果需要数据聚合,group形式的为rdd.map(x=>(x.chatAt(0),x)).groupbyKey().mapValues((x=>x ...

  3. php三维数组去重

    假设叫数组 $my_array; // 新建一个空的数组. $tmp_array = array(); $new_array = array(); // 1. 循环出所有的行. ( $val 就是某个 ...

  4. Java创建WebService服务及客户端实现（转）

    简介 WebService是一种服务的提供方式,通过WebService,不同应用间相互间调用变的很方便,网络上有很多常用的WebService服务,如:http://developer.51cto. ...

  5. oracle11g dataguard 完全手册

    一.前言: 网络上关于dataguard的配置文章很多,但是很多打着oracle11g的文章实际都是只能在9 10 上运行,比如FAL_CLIENT在11g中已经废弃,但是现在网络上的文章都是没有标注 ...

  6. Django 发布时间格式化

    Django在数据库中读取的时间是这种格式: {{title.pub_date} 显示:Nov. 17, 2016, 6:31 p.m. 显然,这不符合我们的习惯,所以需要格式化: {{title.p ...

  7. cocos2d-x:懒人数学函数

    做游戏开发,要用到比较多的数学计算,对于程序员来说,还是用一种懒一点的方法,cocos2d-x方便开发者投机取巧...提供了很多方便的的数学函数,方便我们的数学计算.以下是在网上收集到的一些常用的数学 ...

  8. 用gulp建立自动工具，完成软件的编译、测试、打包和发布流程

    gulp以task的形式组织任务. 在每一个任务中,从gulp.src()指定文件源头开始,经过一系列pipe管道处理, 最后结果保存到gulp.dest指定的目录中,(或输出到stream) 任务的 ...

  9. DataURL详解--转自格桑blog

    DataURI详解 Posted on 2013 年 09 月 09 日 by admin DataURI,不算新东西,却一直没用过,前些日子在webapp中用了点DataURI,就做了下相关的了解, ...

  10. LoadRunner测试结果分析02 转载至zhangzhe的新浪博客

    LoadRunner测试结果分析之我见 上述测试过程的重点在于事务,而LoadRunner生成的测试结果图并不局限于事务上,其中还有是关于Vusers.Errors.Web Resources.Web ...