从 Bootstrap 4 迁移到 5 后模态变为灰色

Question

我刚刚将我的 Bootstrap 4.1 重新链接到 Bootstrap 5，我的模式停止工作。我的意思是当我的模态打开时它变成灰色并且我无法单击按钮或退出它。我应该如何更改才能在 Bootstrap 5 中工作？

这是我的代码：

模态：

<!-- Creates the bootstrap modal where the image will appear -->
  <div class="modal fade" id="imagemodal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zamknij</span></button>
          <h4 class="modal-title" id="myModalLabel">Podgląd</h4>
        </div>
        <div class="modal-body">
          <!-- <img src="" id="imagepreview" style="width: 400px; height: 264px;" > -->
          <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

JS:

$("#pop").on("click", function() {
  $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
  $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});

Answer 1

将 data- 属性更改为 data-bs-，如迁移更改列表中的 Javascript 部分所述在 bootstrap 5 (https://getbootstrap.com/docs/5.0/migration/).

从 Bootstrap 4 迁移到 5 后模态变为灰色

Modal becomes gray after migrating from Bootstrap 4 to 5

twitter-bootstrap

bootstrap-modal