将函数绑定到 Twitter Bootstrap 模式关闭

Posted 2023-02-16

【中文标题】将函数绑定到 Twitter Bootstrap 模式关闭

【英文标题】：Bind a function to Twitter Bootstrap Modal Close

【发布时间】：2012-01-11 22:09:58

【问题描述】：

我在一个新项目中使用 Twitter Bootstrap 库，我希望部分页面在模式关闭时刷新和检索最新的 json 数据。我在文档中的任何地方都没有看到这一点，有人可以向我指出或提出解决方案。

使用记录方法的两个问题

 $('#my-modal').bind('hide', function () 
   // do something ...
 );

我已经在模式上附加了一个“隐藏”类，因此它不会在页面加载时显示，因此会加载两次

即使我删除了隐藏类并将元素 id 设置为 display:none 并在我点击关闭时将 console.log("THE MODAL CLOSED"); 添加到上面的函数中，也没有任何反应。

【参考方案1】：

引导程序 3 和 4

$('#myModal').on('hidden.bs.modal', function () 
    // do something…
);

引导程序 3：getbootstrap.com/javascript/#modals-events

引导程序 4：getbootstrap.com/docs/4.1/components/modal/#events

引导程序 2.3.2

$('#myModal').on('hidden', function () 
    // do something…
);

见getbootstrap.com/2.3.2/javascript.html#modals → 事件

【讨论】：

这似乎有效，但由于某种原因，当将鼠标悬停在模态页脚中的按钮上时，它也会触发。该按钮是一个常规的提交按钮： 知道如何在鼠标悬停时不触发 hide 事件吗？或者，我怎样才能检测到它是因为悬停而被解雇的？顺便说一句：即使触发了事件，模式对话框也不会关闭。

我在 Bootstrap 3 中没有看到这种行为，你能做一个小提琴吗？

这个答案可能应该提到 hidden.bs.modal 和 hide.bs.modal 之间的区别。当 CSS 动画完成时会触发 Hidden，但在我的测试中，如果没有动画，它永远不会触发（尽管可能只是一个错误）。如果您正在使用数据管理，则改用 hide.bs.modal 可能更安全，它会在调用 .modal('hide') 时立即触发。 getbootstrap.com/javascript/#modals-usage - 见事件小节。

Bootstrap 3：当我点击标记为 data-dismiss="modal" 的模态标签时它可以工作（就像一个关闭按钮），但是当我点击黑色时 它不起作用模态框周围的背景区域。模式被关闭，但在页面刷新之前无法重新打开。 'hidden.bs.modal' 和 'hide.bs.modal' 都试过了，都没有用。

@marquito 你能做的（我所做的）就是这样使用它：$('#myModal').modal( backdrop: 'static', keyboard: false ); 这样，当点击灰色区域时，模态不会关闭，也不会在按下 Esc 键时关闭。

【参考方案2】：

引导程序 4

$('#my-modal').on('hidden.bs.modal', function () 
  window.alert('hidden event fired!');
);

查看这个 JSFiddle 以获得一个工作示例：

https://jsfiddle.net/6n7bg2c9/

在此处查看文档的模态事件部分：

https://getbootstrap.com/docs/4.3/components/modal/#events

【参考方案3】：

开始 Bootstrap 3（edit: 在 Bootstrap 4 中仍然相同）有 2 个实例可以触发事件，即：

1. 当模态“隐藏”事件开始时

$('#myModal').on('hide.bs.modal', function ()  
    console.log('Fired at start of hide event!');
);  

2. 当模态“隐藏”事件完成时

$('#myModal').on('hidden.bs.modal', function () 
    console.log('Fired when hide event has finished!');
);

参考：http://getbootstrap.com/javascript/#js-events

【参考方案4】：

您需要使用“on”事件而不是“live”，但将其分配给文档对象：

用途：

$(document).on('hidden.bs.modal', '#Control_id', function (event) 
// code to run on closing
);

【参考方案5】：

$(document.body).on('hidden.bs.modal', function () 
    $('#myModal').removeData('bs.modal')
);

【参考方案6】：

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

中阅读有关模态方法和事件的更多信息

【参考方案7】：

引导程序 4：

$('#myModal').on('hidden.bs.modal', function (e) 
   // call your method
)

hide.bs.modal： 当调用 hide 实例方法时立即触发此事件。

hidden.bs.modal： 当模式对用户完成隐藏时会触发此事件（将等待 CSS 转换完成）​​。

【参考方案8】：

引导程序 5+ #ES6+

更少的依赖 -> 与其他框架一样，由于新的事件方法，Bootstrap 将回归标准

var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) 
    // do something...
);

查看这个 JSFiddle 以获得一个工作示例：

https://jsfiddle.net/Metamagikum/cw5f76bp/3/

官方文档位于此处：

https://getbootstrap.com/docs/5.0/components/modal/

【讨论】：

感谢您成为唯一的纯 JS 解决方案 - 我厌倦了假设整个 jQuery 依赖项的 JavaScript 最小的 sn-ps。

【参考方案9】：

我会这样做：

$('body').on('hidden.bs.modal', '#myModal', function() //this call your method );

其余的已经被别人写了。我也推荐阅读文档：jquery - on method

【参考方案10】：

我已经看到很多关于引导事件的答案，例如当模式关闭时触发的hide.bs.modal。

这些事件存在问题：模式中的任何弹出窗口（弹出框、工具提示等）都会触发该事件。

当模态关闭时，还有另一种方法可以捕获事件。

$(document).on('hidden','#modal:not(.in)', function() );

当模式打开时，Bootstrap 使用 in 类。 使用hidden 事件非常重要，因为在触发事件hide 时仍然定义了类in。

此解决方案在 IE8 中不起作用，因为 IE8 不支持 Jquery :not() 选择器。

【参考方案11】：

如果你想在每个模态关闭时触发一个函数，你可以使用这个方法，

$(document).ready(function ()
    $('.modal').each(function ()
        $(this).on('hidden.bs.modal', function () 
            //fires when evey popup close. Ex. resetModal();
        );
    );
);

所以你不需要每次都指定模态ID。

【参考方案12】：

我和一些人遇到了同样的问题

$('#myModal').on('hidden.bs.modal', function () 
// do something… )

你需要把它放在页面底部，放在顶部永远不会触发事件。

【讨论】：

我会比这更严格地定义规则。当调用 jQuery 选择器 $("#myModal") 时，DOM 中需要存在 ID 为 myModal 的 HTML 元素。因此，您可以将此代码放在页面顶部，但放置在 $(document).on("ready", function() ... );（或在 DOM 填充元素后调用的类似函数）中。