类型错误无法读取未定义的属性（读取“背景”） - bootstrap v5.2.1 modal

Question

在使用引导模式时，我遇到这个错误（TypeError Cannot readproperties of undefined (reading 'backdrop') ），该错误由我们的错误跟踪器跟踪，但我无法重新创建此错误。我尝试使用各种浏览器、浏览器版本、操作系统重新创建错误。此问题并未出现在所有浏览器上。

使用的 Bootstrap 版本 - v5.2.1

我使用 JavaScript 初始化了模态

if (bootstrap == undefined) {
    document.getElementById("browser-not-supported-container").classList.remove("d-none");
} else {
    modal1 = new bootstrap.Modal(document.getElementById('modal1'));
    modal2 = new bootstrap.Modal(document.getElementById('modal2'));
    modal3 = new bootstrap.Modal(document.getElementById('modal3'));
}

这些模态的 HTML 代码

<!-- Modal 1-->
<div class="modal fade text-start" data-bs-backdrop="static" data-bs-keyboard="false" id="modal1" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Header -->
            </div>
            <div class="modal-body">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

<!-- Modal 2-->
<div class="modal fade text-start" id="modal2" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

<!-- Modal 3-->
<div class="modal fade text-start" id="modal3" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

确切的错误是：

TypeError Cannot read properties of undefined (reading 'backdrop') 
    https://example.com/:lineNo3:colNo3 Ni._initializeBackDrop
    https://example.com/:lineNo2:colNo2 new Ni
    https://example.com/:lineNo1:colNo1 HTMLDocument.<anonymous>

注意：lineNo1是modal2初始化的地方

我也尝试过模式选项，但错误仍然存​​在

modal1 = new bootstrap.Modal(document.getElementById('modal1'), { backdrop: "static", keyboard: false });
modal2 = new bootstrap.Modal(document.getElementById('modal2'), { backdrop: "static", keyboard: false });
modal3 = new bootstrap.Modal(document.getElementById('modal3'), { backdrop: "static", keyboard: false });

Answer 1

我正在使用 Vue 3 和 Bootstrap 5.2.3。我试图展示我创建的模态并收到与您完全相同的错误。这就是问题所在。

Vue 有各种可以插入的生命周期事件来执行操作。最初我是在设置阶段做这项工作的：

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  setup() { <-- Too early
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

问题是 Modal 在此阶段尚未加载到 DOM 中，因此在执行 getElementById 操作时未定义。解决方案是等待 DOM 通过使用已安装的阶段加载，如下所示：

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  mounted() { <-- Just right
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

如果您不使用 Vue，答案应该类似。在事件回调函数中执行 getElementById 操作，该函数仅在 DOM 加载后触发，例如DOMContentLoaded