bootstrap-modal - Bootstrap 5使用java脚本隐藏模式

Question

我打开模态使用

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-modalhidebootstrap-5

Answer 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();

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