為什么Bootstrap 5.2.1 在分頁Datatable 時導致modal 隱藏？

Question

我在引導程序v5.2.1模態中有一個數據表。 當我打開模態並嘗試翻閱數據時，模態立即隱藏起來。 Bootstrap v5.2.0 不會發生這種情況。

為什么會這樣？

引導模式中的數據表演示：

BS v5.2.0 演示

BS v5.2.1 演示

有問題的 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

此引導程序版本和模態(github)存在問題。 它在此拉取請求中解決但尚未發布。 在此期間，您可以通過 go 回到 5.2.0 版本。