我在一个新项目中使用 Twitter Bootstrap 库，我希望部分页面在模式关闭时刷新和检索最新的 json 数据。我在文档中的任何地方都没有看到这一点，有人可以向我指出或提出解决方案。
使用记录方法的两个问题
$('#my-modal').bind('hide', function () {
// do something ...
});
我已经在模式上附加了一个“隐藏”类，因此它不会在页面加载时显示，因此会加载两次
即使我删除了隐藏类并将元素 id 设置为 display:none 并在我点击关闭时将 console.log("THE MODAL CLOSED"); 添加到上面的函数中，也没有任何反应。
【问题讨论】：
标签： jquery modal-dialog twitter-bootstrap
$('#myModal').on('hidden.bs.modal', function () {
// do something…
});
引导程序 3：getbootstrap.com/javascript/#modals-events
引导程序 4：getbootstrap.com/docs/4.1/components/modal/#events
$('#myModal').on('hidden', function () {
// do something…
});
【讨论】：
data-dismiss="modal" 的模态标签时它可以工作（就像一个关闭按钮），但是当我点击黑色时 它不起作用模态框周围的背景区域。模式被关闭，但在页面刷新之前无法重新打开。 'hidden.bs.modal' 和 'hide.bs.modal' 都试过了，都没有用。
$('#myModal').modal({ backdrop: 'static', keyboard: false }); 这样，当点击灰色区域时，模态不会关闭，也不会在按下 Esc 键时关闭。
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
});
查看这个 JSFiddle 以获得一个工作示例：
https://jsfiddle.net/6n7bg2c9/
在此处查看文档的模态事件部分：
【讨论】：
开始 Bootstrap 3（edit: 在 Bootstrap 4 中仍然相同）有 2 个实例可以触发事件，即：
$('#myModal').on('hide.bs.modal', function () {
console.log('Fired at start of hide event!');
});
$('#myModal').on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
});
【讨论】：
您需要使用“on”事件而不是“live”，但将其分配给文档对象：
用途：
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
【讨论】：
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
【讨论】：
Bootstrap 提供可以挂钩到modal 的事件，例如，如果您想在模式对用户隐藏完毕后触发event，您可以使用hidden.bs.modal强>事件 像这样
/* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
查看有效的fiddle here，在 Documentation
中阅读有关模态方法和事件的更多信息【讨论】：
引导程序 4：
$('#myModal').on('hidden.bs.modal', function (e) {
// call your method
})
hide.bs.modal： 当调用 hide 实例方法时立即触发此事件。
hidden.bs.modal： 当模式对用户完成隐藏时会触发此事件（将等待 CSS 转换完成）。
【讨论】：
更少的依赖 -> 与其他框架一样，由于新的事件方法，Bootstrap 将回归标准
var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
});
查看这个 JSFiddle 以获得一个工作示例：
https://jsfiddle.net/Metamagikum/cw5f76bp/3/
官方文档位于此处：
【讨论】：
我会这样做：
$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });
其余的已经被别人写了。我也推荐阅读文档：jquery - on method
【讨论】：
我已经看到很多关于引导事件的答案，例如当模式关闭时触发的hide.bs.modal。
这些事件存在问题：模式中的任何弹出窗口（弹出框、工具提示等）都会触发该事件。
当模态关闭时，还有另一种方法可以捕获事件。
$(document).on('hidden','#modal:not(.in)', function(){} );
当模式打开时，Bootstrap 使用 in 类。
使用hidden 事件非常重要，因为在触发事件hide 时仍然定义了类in。
此解决方案在 IE8 中不起作用，因为 IE8 不支持 Jquery :not() 选择器。
【讨论】：
如果你想在每个模态关闭时触发一个函数，你可以使用这个方法，
$(document).ready(function (){
$('.modal').each(function (){
$(this).on('hidden.bs.modal', function () {
//fires when evey popup close. Ex. resetModal();
});
});
});
所以你不需要每次都指定模态ID。
【讨论】：
我和一些人遇到了同样的问题
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
你需要把它放在页面底部，放在顶部永远不会触发事件。
【讨论】：
$("#myModal") 时，DOM 中需要存在 ID 为 myModal 的 HTML 元素。因此，您可以将此代码放在页面顶部，但放置在 $(document).on("ready", function(){ ... });（或在 DOM 填充元素后调用的类似函数）中。