JSP 使用Jquery(jquery-3.6.1.min.js)和Bootstrap 5.2.3打开模态时出现问题

xmd2e60i  于 2023-01-28  发布在  jQuery
关注(0)|答案(1)|浏览(229)

我正在尝试从jquery打开一个modal,但它不起作用。在我升级到Jquery和Bootstrap版本之前,它还在工作。有什么想法吗?

  • 查询代码-
$("#exampleModal").modal();
  • JSP代码-

我正在使用Bootstrap页面中的代码:https://getbootstrap.com/docs/5.2/components/modal/

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <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>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

有什么想法吗?

w51jfk4q

w51jfk4q1#

试试看:

let modalId = document.getElementById("exampleModal");

const myModal = bootstrap.Modal.getOrCreateInstance(modalId);

myModal.modal("show");

在你提供的文档中,在"via javascript"下,看起来你需要首先用getOrCreateInstancenew bootstrap.Modal()初始化它,然后通过示例本身显示它,而不使用jquery标签选择器。
您还可以使用json将模态的选项添加为getOrCreateInstance的第二个参数

相关问题