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

案例中的弹框使用的是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. [Maven]Apache Maven 入门篇

    作者:George Ma 上 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 ma ...

  2. Java JIT(Just-In-Time) Compilation

    http://www.oracle.com/technetwork/articles/java/architect-evans-pt1-2266278.html

  3. 本地新建项目提交到github

    1.在github上创建项目(可以添加README.md),创建后的地址为 https://github.com/xxx/xxx-demo.git 2.在eclipse上新建个quick-start的 ...

  4. Window服务安装方式汇总

    一.制作bat文件 1)Install.bat: @echo 安装服务 %SystemRoot%\Microsoft.NET\Framework\v2.0.50727\installutil AppS ...

  5. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

  6. C++ 快排

    // 进行一轮快排并返回当前的中间数 int getMiddle( int* arr, int low, int high ) { auto swaparr = [&]( int i, int ...

  7. Java cookie和session介绍与区别

    一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器端保持状态的 ...

  8. DES对称性加密

    using System; using System.Security.Principal; using System.Security.Permissions; using System.Secur ...

  9. Linux学习二：Makefile基础

    文首感谢http://www.chinaunix.net 作者:gunguymadman的分享 makefile关系到了整个工程的编译规则.一个工程中的源文件不计数,其按类型.功能.模块分别放在若干个 ...

  10. Windows WMIC命令使用详解

    本文转载出处http://www.jb51.net/article/49987.htm www.makaidong.com/博客园文/32743.shtml wmic alias list brief ...