Bootstrap Modal对话框如何在关闭时触发事件
更新时间：2016年12月02日 09:39:22 作者：Linda
这篇文章主要为大家详细介绍了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个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文将介绍JavaScript如何实现拼音排序 支持所有主流浏览器+中英文系统2012-11-11
对于对于一些表格按价格 等进行排序，方便用户对当前页面的高低价格排序，用户体验性好2009-02-02
使用了移动层，可里面的输入框却不能使用了，下面是解决方法需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了js单线程的本质 Event Loop解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
前段时间心血来潮,想把项目的前端都做一下接口防止重复请求的处理,虽然大部分的接口处理我们都是加了loading的,但又不能确保真的是每个接口都加了的,下面就来总结一下这次的防重复请求的实现方案,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了LayUI下拉树TreeSelect的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在 Vue 3 中使用 Element Plus 的 <el-menu> 组件时,默认情况下菜单项是关闭状态的,如果你想让某个菜单项默认处于展开状态,你可以通过设置菜单项的 default-active 属性来实现,这篇文章主要介绍了element-plus默认菜单打开,需要的朋友可以参考下2024-08-08
删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。
删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。...2007-09-09
用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox...2007-11-11
在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口,下面这篇文章主要给大家介绍了关于使用JavaScript关闭窗口的4种方法,需要的朋友可以参考下2024-01-01
最新评论