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

案例中的弹框使用的是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. iOS开发项目之MVC与MVVM

    MVC MVC,Model-View-Controller,我们从这个古老而经典的设计模式入手.采用 MVC 这个架构的最大的优点在于其概念简单,易于理解,几乎任何一个程序员都会有所了解,几乎每一所计 ...

  2. oracle数据库如何创建表空间，临时表空间

    目标 1.创建表空间 lxy 2.创建临时表空间tmp_lxy create tablespace lxy datafile '/u01/app/oracle/oradata/LXY/lxy.dbf' ...

  3. CentOS下安装Tomcat7

    1.检查java版本信息 #java -version java version "1.7.0_65" OpenJDK Runtime Environment (rhel-2.5. ...

  4. stickUp让页面元素“固定”位置

    stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/

  5. iOS8下bundle路径变更

    iOS8下路径变为: /Users/username/Library/Developer/CoreSimulator/Devices/786824FF-6D4C-4D73-884A-696514481 ...

  6. Wireshark简易教程

    Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据,并为用户提供关于网络和上层协议的各种信息.与很多其他网络工具一样,Wireshark也使用pcap network ...

  7. 使用 Google Web Fonts

    Google Fonts 的介绍:Google Fonts 并不是简单的字体下载站 Google Fonts 地址:https://www.google.com/fonts 左上角可以输入查找的字体名 ...

  8. OpenGL ES(一.概念)

    OpenGL ES是以手持和嵌入式设备为目标的高级3D图形应用程序编程接口,主要的支持平台是iOS,Android,Linux和Windows 1.顶点着色器 他可以用于通过矩阵变换位置,计算照明公式 ...

  9. 期待许久的事情终于发生-微软收购Xamarin

    刚在VS推送的新闻中看到了醒目的标题:Microsoft to acquire Xamarin and empower more developers to build apps on any dev ...

  10. ORA-12520：TNS:监听程序无法为请求的服务器类型找到可用的处理程序

    连接数太多 关掉没用的 plsql