从Bootstrap 5.0.0开始，Bootstrap JS文件似乎必须在<body>结束时加载，以便呈现动态加载的模态（可能还有其他功能）。
同意这个问题。这发生在bootstrap 5.x生产版本中，不管你如何初始化模态。通过JS或通过Data属性动态地初始化。
目前解决这个问题的方法是在HTML主体而不是头部加载bootstrap.bundle.js，但理想情况下这不是这个问题的解决方案。
您是否知道此问题的其他解决方法？
错误：
// Error happens when I want to display a Modal using JS
var modal = new bootstrap.Modal(document.getElementById('my-modal');
modal.show();
// Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
// typeCheckConfig bootstrap.bundle.js:190
// typeCheckConfig bootstrap.bundle.js:184
// _getConfig bootstrap.bundle.js:4603
// Backdrop bootstrap.bundle.js:4539
// _initializeBackDrop bootstrap.bundle.js:4864
// Modal bootstrap.bundle.js:4721
// <anonymous> debugger eval code:2A溶液：
最简单的解决方法是在<body>标记的末尾加载我们的JS：
# app/views/layout/application.html.erb
<body>
<%= yield %>
<%# this `javascript_pack_tag` is initially inside the `<head>` tag
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</body>
1条答案
按热度按时间pinkon5k1#
我也遇到过类似的问题，我使用class=“container”div，然后将其更改为〈div class=“container-fluid”div，突然我的模态不再工作了。
我使用的是Bootstrap 5，bootstrap.bundle.min.js加载在html文件的头部分。
我解决这个问题的“变通方法”是将“content-fluid”类div放在“modal”类div之后。老实说，我不太明白为什么它现在可以工作，但它确实可以
希望有用。