Bootstrap v5 模态显示问题答案

【问题标题】：Bootstrap v5 modal show issueBootstrap v5 模态显示问题
【发布时间】：2021-07-30 02:11:15
【问题描述】：

我决定继续将我的网站更新到最新版本的 Bootstrap 5.0 版，但我很难让模态框正常工作。阅读迁移指南并没有说明任何关于破坏模式的内容，而且我的网站之前运行良好。我的代码使用 javascript/jQuery 在 ajax 加载文本后触发模式。 ajax 部分仍然可以正常工作，但在检索模式后它不会触发模式。我正在使用最新的 bootstrap.bundle.min.js。

$( document ).ready(function() {
$('.hourModal').click(function(){
    var obj_id = $(this).data('id');
    $.ajax({
        url: 'ajax-multi.php',
        type: 'POST',
        data: {obj_id: obj_id,role:'some_role'},
        //dataType: 'html',
        success: function(response){ 
            $('.modal-body').html(response);
            //$('#hourModal').modal('show'); //Old way that worked great
            var hourModal = new bootstrap.Modal(document.getElementById('hourModal'));
            hourModal.show(); // New way I tried from the Bootstrap documentation
        }
    });
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<!-- Button -->
<button type="button" class="btn btn-secondary btn-sm py-0 me-1 hourModal" data-id="1">Blocks</button>

<!-- Modal -->
<div class="modal fade" id="hourModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Object Times</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我得到的错误是：Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element"。

非常感谢任何帮助！

更新：如下所述，我必须将 bootstrap.min.js 移到页面末尾，在 </body> 之后，并在标题顶部离开我调用 jquery.min.js 的位置。有人知道为什么必须这样做吗？

【问题讨论】：

你在混合使用 php 和 JS 这绝不是一个好主意。

标签： javascript jquery bootstrap-5

【解决方案1】：

我遇到了同样的问题。我在 html 末尾和 /body 之前调用了 jquery.js 和 bootstrap.js，它工作正常。

【讨论】：

【解决方案2】：

在<body> 末尾使用引导程序移动您的<script>。它修复了我的 Bootstrap 5 模式问题。

【讨论】：

【解决方案3】：

更新：

在 Bootstrap 5.0.1 中修复

我遇到了同样的问题。我使用 Webpack 构建的唯一区别。

如果您想从head 部分加载脚本，您可以尝试添加async 选项。

这为我解决了这个问题。

<script src="..." async="async"></script>

【讨论】：

【解决方案4】：

mamantoha 的建议似乎是处理此问题的更好方法，因为它不需要移动该部分的外部，并且某些人可能具有需要在该部分中的其他脚本之前加载引导程序的依赖项。

【讨论】：

【解决方案5】：

此问题已在当前可用的 5.0.1 中修复

【讨论】：