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代码[翻译]
Feb 12 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript 节点遍历函数
2010/03/28 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
深入理解Python对Json的解析
2017/02/14 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python实现日志按天分割
2019/07/22 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
料理师求职信
2014/01/30 职场文书
办公室文员自荐书
2014/02/03 职场文书
2016年公司新年寄语
2015/08/17 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python