Bootstrap 5 使用 javascript 隐藏模式

【问题标题】：Bootstrap 5 hide modal using java scriptBootstrap 5 使用 javascript 隐藏模式
【发布时间】：2021-10-22 15:27:12
【问题描述】：

我使用打开模式

document.getElementById('openLoginFormBTN').addEventListener('click', function (event) {
        let loginFormModal= new bootstrap.Modal(document.getElementById('loginModal'));
          loginFormModal.show();
    });

它工作正常，但是当我想在函数中关闭它时

...
console.log("user logged in")
let loginFormModal= new bootstrap.Modal(document.getElementById('loginModal'));
loginFormModal.hide();
...

它不想关闭。

【问题讨论】：

标签： bootstrap-modal hide bootstrap-5

【解决方案1】：

我相信您可以依赖getOrCreateInstance 方法。拥有实例后，无需再次检索模式。

const btnShow = document.getElementById('openLoginFormBTN');
const modalEl = document.getElementById('loginModal');
const loginFormModal = bootstrap.Modal.getOrCreateInstance(modalEl);

btnShow.addEventListener('click', function (event) {
    loginFormModal.show();
});

loginFormModal.hide();

我创建了一个DEMO，您可以在其中玩这个。不确定我是否在您的用例中达到了目标。请详细说明以防我遗漏了什么。

【讨论】：