Bootstrap 5模态框无法通过JQuery关闭问题求助

问题根源 #

你当前使用的$('#popup').modal('hide')是Bootstrap 4及更早版本的jQuery调用方式，而Bootstrap 5已不再默认依赖jQuery，改用原生JS API控制模态框，直接用jQuery链式调用会失效。另外代码中还存在几处语法和逻辑细节问题。

修复步骤 #

1. 修正HTML语法错误

• 补全placeHolderElement的引号：

  <div id="placeHolderElement"></div>
  

• 修正模态框的闭合标签（最后一行的<div>改为</div>）：

  <div class="modal fade" id="popup" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <partial name="_loader" model='new LoaderVM{ message = "Loading"}'/>
        </div>
      </div>
    </div>
  </div>
  

2. 使用Bootstrap 5原生JS API控制模态框

先创建模态框实例，再通过实例方法控制显示/隐藏：

$(function(){
  // 初始化Bootstrap 5模态框实例
  const popupModal = new bootstrap.Modal(document.getElementById('popup'));

  $('#hiddenBtn').click(function(){
    $.ajax({
      url: 'some url',
      type: 'get',
      dataType: 'html',
      beforeSend: function(){
        popupModal.show(); // 用原生API显示模态框
      },
      success: function(response){
        $('#placeHolderElement').html(response);

        var dataFromServer = getDataFromServer();
        // 处理数据并追加表格行的逻辑
        
        popupModal.hide(); // 用原生API隐藏模态框
      },
      complete: function(){
        // 确保无论请求成功/失败都关闭模态框
        if (popupModal._isShown) {
          popupModal.hide();
        }
      }
    });
  });

  $('#hiddenBtn').trigger('click');
});

3. 确保引入正确的Bootstrap文件

必须引入包含Popper.js的bootstrap.bundle.min.js（模态框依赖Popper处理弹窗定位），不要单独引入bootstrap.min.js。

4. 处理异步数据逻辑（如果存在）

如果getDataFromServer()是异步操作（比如内部包含AJAX请求），需等待异步操作完成后再关闭模态框。例如返回Promise时使用async/await：

success: async function(response){
  $('#placeHolderElement').html(response);

  // 等待异步数据获取完成
  var dataFromServer = await getDataFromServer();
  // 处理数据并追加表格行的逻辑
  
  popupModal.hide();
}

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