Bootstrap Modal对话框如何在关闭时触发事件

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

实例

下面的实例演示了事件的用法：

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
 aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"
 aria-hidden="true">×
 </button>
 <h4 class="modal-title" id="myModalLabel">
 模态框（Modal）标题
 </h4>
 </div>
 <div class="modal-body">
 点击关闭按钮检查事件功能。
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default"
 data-dismiss="modal">
 关闭
 </button>
 <button type="button" class="btn btn-primary">
 提交更改
 </button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
 $(function () { $('#myModal').modal('hide')})});
</script>
<script>
 $(function () { $('#myModal').on('hide.bs.modal', function () {
 alert('嘿，我听说您喜欢模态框...');})
 });
</script>

</body>
</html>

更多内容请点击专题《Bootstrap Modal使用教程》进行学习，希望大家喜欢。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo

  • BootStrap modal模态弹窗使用小结

    模态弹窗 触发元素基本结构: 复制代码 代码如下: <button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button> 内容元素基本结构: <div class="modal fade" id="modal"> <div class="modal-d

  • Bootstrap每天必学之模态框（Modal）插件

    Bootstrap每天必学之模态框（Modal）插件

    本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

  • Bootstrap modal使用及点击外部不消失的解决方法

    本文实例为大家分享了Bootstrap modal使用及点击外部不消失的解决方法,供大家参考,具体内容如下 1.代码: <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/&g

  • 如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,代码

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • Bootstrap Modal遮罩弹出层(完整版)

    之前发表过一篇文章叫Bootstrap Modal弹窗代码,其实那个只是一个弹出层代码而已,并不是仿造Bootstrap的,Bootstrap modal是给外层添加固定fixed,然后内容使用自适应靠上居中方式.今天分享的这篇文章正是这种方式. html结构 考虑到内容区域需要居中对齐,所以至少要有一个div来定位和显示背景,再用一个div居中内容,内容区域想分成header.body和footer. <div class="rs-dialog" id="myModa

  • 整理关于Bootstrap模态弹出框的慕课笔记

    整理关于Bootstrap模态弹出框的慕课笔记

    整理自慕课笔记 插件的源文件:modal.js. 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.如下图所示: <body> <button class="btn btn-primary" type="button">点击我</button> <div cl

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • 解决bootstrap中modal遇到Esc键无法关闭页面

    bootstrap为我们提供了很多方便的页面控件,modal就是其中之一.很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效. $('#editFormItemModal').modal({show:true, keyboard:true}); 此问题在2.1以后版本出现,要解决这个问题也很简单,modal所在div添加一个tabindex属性即可: <div class="fade modal" tabindex="-1

随机推荐