TypeError 无法读取未定义的属性（读取 \'backdrop\'） - bootstrap v5.2.1 modal答案

【问题标题】：TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modalTypeError 无法读取未定义的属性（读取 \'backdrop\'） - bootstrap v5.2.1 modal
【发布时间】：2022-11-10 12:07:16
【问题描述】：

在使用引导模式时，我遇到了这个错误（TypeError 无法读取未定义的属性（读取“背景”）) ，这是由我们的跟踪错误跟踪器，但我无法重新创建此错误。我尝试使用各种浏览器、浏览器版本、操作系统重新创建错误。此问题并未出现在所有浏览器上。

使用的引导版本 - 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 });

【问题讨论】：

投票结束，因为我无法重现该问题。 Bootstrap GitHub 上似乎没有报告任何类似的错误，但您可以打开一个新问题。还有一个新版本的 Bootstrap 5.2.2，尽管对 modal 的更改似乎与此问题无关。

标签： javascript html bootstrap-5 bootstrap5-modal

【解决方案1】：

我有这个完全相同的问题。这曾经解决过吗？

【讨论】：