从 Bootstrap 4 迁移到 5 后 Modal 变灰答案

【问题标题】：Modal becomes gray after migrating from Bootstrap 4 to 5从 Bootstrap 4 迁移到 5 后 Modal 变灰
【发布时间】：2021-12-09 12:00:06
【问题描述】：

我刚刚将我的 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
});

【问题讨论】：

标签： twitter-bootstrap bootstrap-modal

【解决方案1】：

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

【讨论】：