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 indexOf函数使用说明
Jul 03 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JS搜狐面试题分析
Dec 16 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 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 访问oracle 存储过程实例详解
2017/01/08 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
清空上传控件input file的值
2010/07/03 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
PyQt5实现简易计算器
2020/05/30 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
安全宣传标语口号
2014/06/06 职场文书
任命书范本大全
2014/06/06 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
感谢信怎么写
2015/01/21 职场文书
法定代表人资格证明书
2015/06/18 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js