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个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Bootstrap table列上下移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
框架页面高度自动刷新,加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码，具体实现如下，感兴趣的朋友可以了解下2013-11-11
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。接下来通过本文给大家介绍location.hash保存页面状态的相关内容，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了Python版实现微信公众号扫码登陆，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
如何禁止拷贝网页内容，想维护下自己的版权，下面有个不错的方法，大家可以学习下2014-01-01
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，这篇文章主要介绍了js中进行字符串替换的方法,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了BootStrap智能表单实战系列(四)表单布局介绍，表单布局分为自动布局和自定义布局两种，本文通过代码给大家介绍，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
本篇文章教给大家用JS代码配合CSS样式来实现滚动时钟的动画效果，一起来学习下。2017-12-12
用innerHTML ＆符号副值给文本框后会变成＆amp;的方法
用innerHTML ＆符号副值给文本框后会变成＆amp;的方法...2007-07-07
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
最新评论