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

案例中的弹框使用的是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. Redis 简单命令

    1. 新增 set keyName "keyValue" 2. 获取 get keyName 查看所有Key keys * 3. 删除 //删除当前数据库中的所有Key flush ...

  2. es6 const

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. npoi上传xlsx文件，并读取数据

    视图 public PartialViewResult UploadIndex() { return PartialView(); } <div> <fieldset style=& ...

  4. HBase工程师线上工作经验总结----HBase常见问题及分析

    阅读本文可以带着下面问题:1.HBase遇到问题,可以从几方面解决问题?2.HBase个别请求为什么很慢?你认为是什么原因?3.客户端读写请求为什么大量出错?该从哪方面来分析?4.大量服务端excep ...

  5. PHP中include和require的区别详解

    1.概要 require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说, ...

  6. mysql数据备份

    转载自:http://blog.chinaunix.net/uid-16480950-id-102800.html   http://www.cnblogs.com/xuejie/archive/20 ...

  7. string相关总结

    一 <string> 1 string类常见成员函数 (1)属性相关 s.empty()   s为空时返回true,否则返回false s.size()      返回s中字符的个数,不包 ...

  8. <网页web工作面试题>

    磨刀不误砍柴工,在百忙之余的中午休息时,我录入一下我的面试题,把基础的知识重新温故,稳固! 1.块级元素和行内元素都有哪些? 答:块级元素:div,form,fildset等 行内元素:hr,p,fo ...

  9. ESXi Install OpenWRT

    根据官方的提示,下载的img镜像需要转换为vmdk. 地址:http://wiki.openwrt.org/doc/howto/vmware 转换需要qemu-utils,网上的安装方法: #64位系 ...

  10. [手机取证] “神器”IP-BOX的一些问题

    网上最近传的纷纷扬扬的iOS密码破解神器IP-BOX,很多人感兴趣,作为一个该产品的老用户,来破除一下迷信,顺便做个普及~ Q1:这东西好神奇,是不是所有都能破解? A1:支持简单密码的穷举,有条件的 ...