javascript - 为什么Bootstrap 5.2.1 在分页Datatable 时导致modal 隐藏？

Question

我有一个 datatable在 Bootstrap v5.2.1 模态中。当我打开模态并尝试翻阅数据时，模态立即隐藏起来。 Bootstrap v5.2.0 不会发生这种情况。

为什么会这样？

Bootstrap 模式中的数据表演示:

BS v5.2.0 demo

BS v5.2.1 demo

有问题的 BS v.5.2.1 代码片段:

$(document).ready(function() {

  $('#example').DataTable({
    scrollY: "40vh",
    scrollCollapse: true,
    scroller: true,
    responsive: true
  });

  $(document).on('shown.bs.modal', '#modal', function() {
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc()
      .scroller.measure();
  });

  $('#exampleModal').on('hide.bs.modal hidden.bs.modal', function(e) {
    //console.log(e);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/js/bootstrap.bundle.min.js"></script>


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table id="example" class="table table-striped table-bordered table-hovered" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>a@a.com</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>b@b.com</td>
              <td>Admin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

此 Bootstrap 版本和模态 (github) 存在问题.它在 this pull request 中解决了但尚未发布。在此期间，您可以返回到 5.2.0 版本。