javascript - Bootstrap v5 模态显示问题-6ren

javascript - Bootstrap v5 模态显示问题

转载作者：行者123 更新时间：2023-12-04 12:06:59

25

4

我决定继续将我的网站更新到最新版本的 Bootstrap 5.0 版，并且很难让模态框正常工作。阅读迁移指南并没有说明任何关于破坏模式的内容，而且我的网站之前运行良好。我的代码在 ajax 加载文本后使用 javascript/jQuery 触发模式。 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>

我得到的错误是:未捕获的 TypeError:BACKDROP:选项“rootElement”提供类型“null”但预期类型“元素”。
任何帮助是极大的赞赏!
更新:
如下所述，我不得不将 bootstrap.min.js 移到页面末尾，在 </body> 之后并离开我在标题顶部调用 jquery.min.js 的位置。任何人都知道为什么必须这样做？

最佳答案

移动您的<script>在 <body> 末尾带有 Bootstrap .它修复了我的 Bootstrap 5 模态问题。

关于javascript - Bootstrap v5 模态显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67440523/

25

4

0

文章推荐： if-statement - 没有 `else` 的 Julia 三元运算符

文章推荐： node.js - nvm 安装 Node 无法在 macOS Big Sur M1 芯片上安装

文章推荐： python - 从多个列表中创建一个列表

文章推荐： svg - SVG笔触和填充之间的空间

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

首页

博学

6Ren·AI

商城

javascript - Bootstrap v5 模态显示问题