如何使用本机javascript处理Bootstrap'hidden.bs.modal'事件

Question

所以我想处理Bootstrap模态关闭/关闭事件。我只能在互联网上找到JQuery版本。我们如何使用本地javascript做到这一点？

我尝试过：

document.querySelector('#modal').addEventListener('hidden.bs.modal', onClick);

当然，它没有用。有谁有知识和关心向我展示如何？谢谢。

Answer 1

没有Bootstrap的JavaScript部分或其替代之一，Bootstrap模态将无法工作。

默认的Bootstrap JavaScript取决于jQuery。但是，您可以将其完全替换为其任何具有现代框架风味的替代品：

• ngBootstrap（角度）
• BootstrapVue（Vue）
• React Bootstrap（React）

以上每个版本以及jQuery（默认）版本，都会在模式元素<div class="modal"></div>（如here所述）上触发4个模式事件，并且事件冒泡（一直到document.body） 。

因此，无论您使用哪种Bootstrap js风格，这都应该起作用：

document.body.addEventListener('hidden.bs.modal', yourCallback);

...如果，且仅当确实加载了Bootstrap的js（以一种或另一种形式）。

---

您尝试过的潜在问题：

• 您的DOM中有多个id="modal"元素（.querySelector()仅返回DOM中的第一个匹配项，并在随后的一个元素上进行了测试）
• 您用于测试的模态没有id="modal"
• 您没有加载有效形式的Bootstrap JavaScript，或者您使用的是不包含模式模块的自定义包
• 关于Bootstrap的依赖项有些怪异（即：您尝试将一种版本的CSS与另一种版本的js混合，而您缺少popper等）

如果我的回答对您没有帮助，请提供minimal reproducible example，以确保您引用了所使用的Bootstrap依赖关系及其加载顺序。简而言之，请确保您的问题is 可再现。