gri*_*fgj 5 javascript jquery bootstrap-5
我决定继续将我的网站更新到最新版本的 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>我得到的错误是：未捕获的类型错误：BACKDROP：选项“rootElement”提供了类型“null”但预期类型为“元素”。
任何帮助是极大的赞赏！
更新：如下所述，我不得不将 bootstrap.min.js 移动到页面的末尾，</body>然后离开我在标题顶部调用 jquery.min.js 的位置。任何人都知道为什么必须这样做？