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

案例中的弹框使用的是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. deep learning 练习 多变量线性回归

    多变量线性回归(Multivariate Linear Regression) 作业来自链接:http://openclassroom.stanford.edu/MainFolder/Document ...

  2. Python单链表实现

    class Node(): def __init__(self,InitDate): self.Date=InitDate self.next=None def setNext(self,newnex ...

  3. redis基础学习(不定期更新)

    redis简介 redis是Remote Dictionary Server(远程数据服务)的缩写 数据模型是key-value,是用C编写的 数据类型有string list hash set so ...

  4. MySQL 教程分享

    MySQL 教程 MySQL 安装 MySQL 管理与配置 MySQL PHP 语法 MySQL 连接 MySQL 创建数据库 MySQL 删除数据库 MySQL 选择数据库 MySQL 数据类型 M ...

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

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

  6. E1、T1链路

    北美的24路脉码调制PCM简称T1 速率是1.544Mbit/s 北美使用的T1系统共有24个话路,每个话路采样脉冲用7bit编码,然后再加上1位信令码元,因此一个话路占用8bit. 帧同步码是在24 ...

  7. wampserver配置域名

    装载自http://blog.csdn.net/znb26/article/details/51204313

  8. linux(Debian) 中的cron计划任务配置方法

    cron服务每分钟不仅要读一次/var/spool/cron内的所有文件,还需要读一次/etc/crontab,因此我们配置这个文件也能运用cron服务做一些事情.用crontab配置是针对某个用户的 ...

  9. python 序列化 json pickle

    python的pickle模块实现了基本的数据序列和反序列化.通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储:通过pickle模块的反序列化操作,我们能够从文件 ...

  10. 关于char的定义语句，正确的有（）

    A.char c = "a";       不对,char只能是单引号 B.char c = '\'';       对,\'是转义字符,为'单引号 C.chae c='cafe' ...