如何使用原生JavaScript关闭通过data属性打开的Bootstrap 5模态框

你可以直接使用Bootstrap 5模态框内置的getInstance静态方法获取已经初始化完成的实例，不需要自行存储变量，代码如下：

// 填入你data-bs-target属性指向的模态框ID，示例中为exampleModal
const modalElement = document.getElementById('exampleModal')
// 获取已存在的模态框实例
const modalInstance = bootstrap.Modal.getInstance(modalElement)
// 调用关闭方法，可选链用于避免实例未初始化时报错
modalInstance?.hide()

注意事项 #

• 仅通过data-bs-toggle、data-bs-target属性触发的模态框，Bootstrap会在首次触发打开时自动完成实例初始化，打开后调用getInstance即可正常获取到实例。
• 如果需要兼容模态框还未打开过、实例未初始化的场景，可以用getOrCreateInstance替代getInstance，该方法会在实例不存在时自动完成初始化，保证始终返回可用实例：

const modalInstance = bootstrap.Modal.getOrCreateInstance(document.getElementById('exampleModal'))
modalInstance.hide()

• 不要直接通过new bootstrap.Modal()重复初始化已存在实例的DOM节点，否则会导致同一个节点挂载多个实例，出现事件重复触发、操作失效等异常问题。

内容的提问来源于stack exchange，提问作者noone392