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 &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript数组排序汇总
2015/07/07 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
python选择排序算法的实现代码
2013/11/21 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python操作gitlab API过程解析
2019/12/27 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
区域销售经理职责
2013/12/22 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
政府门卫岗位职责
2014/04/29 职场文书
授权委托书样本
2014/09/25 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技