Bootstrap 5.1.0切换模态框时首个模态框不隐藏是什么原因？

你遇到的问题是版本不兼容导致的。Bootstrap 5 支持多模态框自动切换隐藏前一个的特性是5.2.0版本才正式发布的，你当前引入的是5.1.2版本的Bootstrap资源，该版本尚未支持两个模态框切换时自动隐藏前一个的逻辑，所以才会出现模态框叠加、背景遮罩颜色加深的情况。而Bootstrap官方文档的示例是运行在对应版本的框架上，所以可以正常运行。

解决办法 #

方案1：升级Bootstrap版本（推荐）

直接将你的Bootstrap CSS和JS资源替换为5.2.0及以上版本即可，原有代码无需任何修改就能正常实现模态框切换效果。

方案2：兼容5.1.x版本手动处理

如果项目必须使用5.1.2版本，可以额外添加一段JS逻辑手动处理模态框切换：

document.querySelectorAll('[data-bs-toggle="modal"][data-bs-dismiss="modal"]').forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取当前打开的模态框实例，手动隐藏
    const currentModal = bootstrap.Modal.getInstance(btn.closest('.modal'))
    currentModal.hide()
  })
})

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