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

它不想关闭。

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

我创建了一个 DEMO，您可以在其中试用它。不确定我是否符合您的用例。请详细说明以防我遗漏了什么。

Bootstrap 5 使用 java 脚本隐藏模态

Bootstrap 5 hide modal using java script

hide

bootstrap-modal

bootstrap-5