下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.modal 在调用 show 方法后触发。 
$('#identifier').on('show.bs.modal', function () {

  // 执行一些动作...

})
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 
$('#identifier').on('shown.bs.modal', function () {

  // 执行一些动作...

})
hide.bs.modal 当调用 hide 实例方法时触发。 
$('#identifier').on('hide.bs.modal', function () {

  // 执行一些动作...

})
hidden.bs.modal 当模态框完全对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () {

  // 执行一些动作...

})

模态框MODAL的一些事件捕捉的更多相关文章

  1. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  2. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  3. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  4. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  5. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

  6. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  7. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  8. Bootstrap多层模态框modal嵌套问题

    一.问题 在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...

  9. vue2.X 自定义 模态框 modal

    1.自定义 modal Modal.vue <!-- 模态框 --> <template> <div class="modal-mask" v-sho ...

随机推荐

  1. pandas 读取大文件 read_table C-engine CParserError: Error tokenizing data

    解决办法: pd_data = pd.read_table(comment_file,header=None,encoding='utf-8', engine='python') 官网解析: engi ...

  2. HTTP协议（Requset、Response）

    目录 http协议 http报文解析: Http请求(浏览器->服务器) HttpServletRequest对象: Http响应(服务器->浏览器) HttpServletRespons ...

  3. Java闰年的计算，Calendar的用法

    Java闰年的计算,Calendar的用法 代码如下: package com.aaa.zuoye; import java.text.ParseException; import java.util ...

  4. cdnbest如何查看站点操作日志(同步日志)

     1. 在区域列表点同步日志 2. 点击进入后,可以查看对哪个站点进行了操作,操作时间,ip,id都有记录 3. 想知道详细操作了什么内容把鼠标指向操作类型,就会弹出操作的信息

  5. Appium1.6 GUI界面介绍

    Appium1.6安装详见随笔:http://www.cnblogs.com/meitian/p/7360017.html   下面具体介绍一下GUI界面 1.appium server配置页面 2. ...

  6. c++ 面试题（汇总）

    1,extern 关键字作用: http://www.cnblogs.com/lzjsky/archive/2010/11/24/1886686.html 2,static 关键字作用: https: ...

  7. 七：python 对象类型详解三：列表

    一:列表简介: 1,列表可以包含任何种类的对象:数字.字符串甚至集合对象类型.列表都是可变对象,它们都支持在原处修改的操作,可以通过指定的偏移量和分片.列表方法调用.删除语句等方法来实现.关键的作用有 ...

  8. Java字符串String详解

    1.String字符串 实例化String对象: (1)直接赋值,如:String str="hello"; (2)使用关键字 new,如:String str=new Strin ...

  9. POJ-3078.Shuffle'm Up(简单模拟题)

    这道题做了有四个小时吧,今天一整天都处于边玩边学的状态,我很是不喜欢...一开始用了20分钟模拟,过了样例后TLE了,就在考虑是不是判断是否重复判定的数组开大了,结果一直蛙,后面想到了map判重,结果 ...

  10. WdatePicker控件Javascript取得当前时间、取得减30分钟时间

    1.取得当前时间 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var se ...