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


Posted in Javascript onDecember 02, 2016

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

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对话框如何在关闭时触发事件

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 #Javascript
关于Function中的bind()示例详解
Dec 02 #Javascript
bootstrap模态框消失问题的解决方法
Dec 02 #Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
You might like
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
法人代表证明书范本
2015/06/18 职场文书