javascript TypeError无法读取未定义的属性(阅读“backdrop”)- Bootstrap v5.2.1模态

zdwk9cvp 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(198)

在使用引导模式时，我遇到了这个错误（TypeError无法读取未定义的属性（阅读“backdrop”）），这个错误由我们的错误跟踪器跟踪，但我无法重现这个错误。我尝试在各种浏览器、浏览器版本和操作系统上重现这个错误。
使用的引导版本- 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>

注意：lineNo 1是modal 2初始化的位置

我还尝试了模态选项，但错误仍然存在

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

JavaScript

来源：https://stackoverflow.com/questions/74040339/typeerror-cannot-read-properties-of-undefined-reading-backdrop-bootstrap-v

1条答案

按热度按时间

2hh7jdfx1#

我使用的是Vue3和Bootstrap 5.2.3。我试图显示我创建的一个Modal，但收到了与您完全相同的错误。以下是问题所在。
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

赞(0）回复(0）举报 2023-02-21

我来回答

javascript TypeError无法读取未定义的属性(阅读“backdrop”)- Bootstrap v5.2.1模态

1条答案

相关问题

热门标签

最新问答