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

事件 描述 实例
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. 大数据入门到精通4--spark的rdd的map使用方式

    学习了之前的rdd的filter以后,这次来讲spark的map方式 1.获得文件 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavig ...

  2. 无线渗透wep加密路由器

    停掉网络服务 service network-manager stop 检查现在的环境适不适合使用airmon-ng airmon-ng check 杀死可能冲突的进程 开启网卡monitor模式 a ...

  3. Ajax图片异步上传并回显

    1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...

  4. Struts1框架学习笔记

    类实现DispatchAction  类似于ActionServlet   ActionServlet 来自于 org.apache.struts.action 包,它继承自 HttpServlet, ...

  5. 二：python 对象类型概述

    1,为什么使用内置类型: a)内置对象使程序更容易编写 b)内置对象是扩展的组件 c)内置对象往往比定制的数据结构更加高效 d)内置对象是语言的标准的一部分 2,python  的主要内置对象 对象类 ...

  6. Android 性能测试之内存 --- 追加腾讯性能案例，安卓抓取性能扫盲帖

    内存测试: 思路 目前做的是酒店APP,另下载安装几个个第三方酒店的APP以方便对比(相当于可以做竞品测试) 数据的获取来源是ADB底层命令,而且最好是不需要root权限,因为很多手机root很麻烦或 ...

  7. RxJS之组合操作符 ( Angular环境 )

    一 merge操作符 把多个 Observables 的值混合到一个 Observable 中 import { Component, OnInit } from '@angular/core'; i ...

  8. ngular ionic select ng-options 默认选择第一个值的写法

    1. html <select ng-model="selectOrderState" style="border:none;left:0" ng-opt ...

  9. 上海大都会赛 I Matrix Game(最大流)

    At the start of the matrix game, we have an N x M matrix. Each grid has some balls.The grid in (i,j) ...

  10. how2j网站前端项目——天猫前端（第一次）学习笔记2

    今天早上开始首页内容.首页除了公共页面,还有许多自己的内容:导航和轮播.分类菜单.推荐产品展示,最后还有js的互动. 一.导航和轮播的学习 在自己做图片的轮播时,还是没有一次成功.存在了好几处问题: ...