bootstrap 5 关闭模式与香草 javascript答案

【问题标题】：bootstrap 5 close modal with vanilla javascriptbootstrap 5 关闭模式与香草 javascript
【发布时间】：2021-11-09 05:30:45
【问题描述】：

你好按照教程在这里 https://getbootstrap.com/docs/5.0/components/modal/#via-javascript 他们使用一个按钮来切换显示模式。如果你想用 javascript 在 bootstrap 5 中显示一个模态，你基本上可以使用 var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); myModal.show();

我的问题是如何关闭使用按钮打开的 javascript 模式。基本上，我怎样才能获得已经打开的模式的句柄？我意识到一旦我有了句柄，我就会调用 .hide()

---编辑--- 为了说明这一点。在 bootstrap 5 中，当它在不使用 javascript 的情况下打开时

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

我试图掌握那个模式

【问题讨论】：

var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); 您自己的代码示例已经提供了句柄 myModal。我不知道这里有什么问题。你甚至可以使用句柄来调用myModal.show();...
这是不正确的。这是行不通的。你不能在那上面调用 hide 或 show
很抱歉，当您没有使用 javascript 打开实例时，问题是获取到句柄的实例
这不是你问的问题。它也在文档中：getbootstrap.com/docs/5.0/components/modal/#hide
我问过当你没有句柄时如何关闭模式，因为它是用引导程序 5 中描述的按钮打开的

标签： javascript bootstrap-modal bootstrap-5

【解决方案1】：

想通了。

var myModalEl = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();

我错过了 bootstrap.Modal.getInstance。每次我花 5 个小时盯着某样东西寻找答案。终于发到这里了，立马弄明白了哈哈。

【讨论】：

【解决方案2】：

您可以使用变量myModal 来调用方法。在您的按钮单击上使用隐藏方法来隐藏您的模式：myModal.hide() 从此处阅读有关方法的更多信息：https://getbootstrap.com/docs/5.0/components/modal/#methods

【讨论】：

问题是如何获取一个在不使用 javascript 的情况下打开的模式的句柄，因为这是 bootstrap 5 建议您这样做的方式。