Bootstrap 5模态框切换问题：关闭后页面无法滚动的解决方法

问题背景 #

通过Ajax加载内容打开Bootstrap 5模态框，后续需替换模态框内容。简化示例未使用Ajax，功能可正常触发，但关闭第二个模态框后页面无法滚动，推测是前一个模态实例未被正确关闭。

解决代码 #

const open_modal = document.querySelector('.modal.show');
if (open_modal) bootstrap.Modal.getInstance(open_modal).hide();

相关参考逻辑 #

Bootstrap官方文档中有模态框切换的相关章节，核心逻辑是先关闭已打开的模态框再打开新的，在bootstrap.js中能找到对应代码片段：

const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR$1);

if (alreadyOpen) {
  Modal.getInstance(alreadyOpen).hide();
}

示例代码 #

HTML代码 #

<div id="div_modal_container"></div>

<button type="button" class="btn btn-secondary ms-2 btn-open-form">Feedback</button>

<div id="div_ajax_answer_html1">
  <div id="div_modal_default" class="modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="false">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header bg-secondary text-light">
                  <h5 class="modal-title">Feedback</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                    <h1>First modal</h1>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abort</button>
                  <button type="button" class="btn btn-primary btn-send-form"> Send</button>
              </div>
          </div>
      </div>
  </div>
</div>

<div id="div_ajax_answer_html2">
  <div id="div_modal_default" class="modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="false">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header bg-secondary text-light">
                  <h5 class="modal-title">Confirmation</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                    <h1>Second modal</h1>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">okay</button>
              </div>
          </div>
      </div>
  </div>
</div>

JS代码 #

$(document).ready(function()
{
  $(document).on('click', '.btn-open-form', function()
  {
    let ajax_answer_html = $('#div_ajax_answer_html1').html();
    let $modal_container = $('#div_modal_container');
    $modal_container.html(ajax_answer_html);
    let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('div_modal_default'));
    modal.show();
  });

  $(document).on('click', '.btn-send-form', function()
  {
    let ajax_answer_html = $('#div_ajax_answer_html2').html();
    let $modal_container = $('#div_modal_container');
    $modal_container.html(ajax_answer_html);
    console.log($modal_container.html());
    let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('div_modal_default'));
    modal.show();
  });
});

内容的提问来源于stack exchange，提问作者Phantom