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

事件 描述 实例
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. lua keynote2

    [lua keynote2] 1.Lua函数可以返回多个结果值,比如string.find,其返回匹配串"开始和结束的下标"(如果不存在匹配串返回nil). > s, e = ...

  2. Controlled Components

    [Controlled Components] In HTML, form elements such as <input>, <textarea>, and <sele ...

  3. cdh 安装系列1-- manager 6.01 安装

    一.如果是远程centos安装,请参考我得博客,通过xmanager 链接centos桌面 二.Non-production Installation Ideal for trying Clouder ...

  4. laravel 自定义常量的方法

    注意:laravel版本为5.1  第一种方法 在本地可以用 我上传到服务器发现用不了  有待解决 第二种方法  在本地可以用 上传服务器后 要把 constants.php   文件权限改为 755 ...

  5. js获取当前网页header头部信息

    思路,通过ajax重新请求当前页面,用getAllResponseHeaders方法获取: var req = new XMLHttpRequest();req.open('GET', documen ...

  6. as3.0控制声音大小

    //加载声音 var sound:Sound=new Sound(); sound.load(new URLRequest("1.mp3")): //声明声道 var soundC ...

  7. 第二章 向量（a）接口与实现

  8. python爬虫----scrapy框架简介和基础应用

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...

  9. linux之docker学习

    1.redis主从同步 可以主从数据同步,从库只读,只能手动切换主备关系2.redis哨兵 -准备redis主从数据库环境 -准备redis哨兵(可以有一个,可以有多个) -哨兵检测redis主库状态 ...

  10. Python+Selenium学习--定位一组对象

    场景 从上一节的例子中可以看出,webdriver可以很方便的使用find_element方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用find_elements方法. ...