通过AJAX响应调用的模态框无法关闭该如何解决？

故障根因 #

• 语法错误1：AJAX请求的type参数值get未加引号，会导致请求异常，连带模态框逻辑出错
• 逻辑顺序错误：先调用modal("show")再往模态框容器插入内容，Bootstrap初始化模态框时没有识别到合法的内部结构，自带的data-dismiss关闭逻辑和自定义关闭逻辑都会失效
• 语法错误2：自定义关闭事件的回调函数缺少左大括号{，JS解析失败，关闭事件没有成功绑定
• 冗余代码：$modal本身已经是jQuery对象，不需要再额外套一层$()重复包装

修正后的JS代码 #

$('.open-modal').click(function(post_id) {
  var $modal = $('.modal');
  $.ajax({
    url: 'get_react_user.php',
    type: 'get', // 修复：给get添加引号
    cache: false,
    success: function(data) {
      console.log(data);
      $modal.html(data); // 修复：先插入模态框内容，再初始化显示
      $modal.modal("show");
      console.log($modal);
    }
  })
})
// 修复：补全回调函数的左大括号
$(document).on('click','.close-modal',function() {
  $('.modal').modal('hide');
})

额外检查项 #

• 确认页面已正确引入jQuery和Bootstrap JS文件，且引入顺序为jQuery在前、Bootstrap JS在后
• 如果你使用的是Bootstrap 5版本，需要把PHP返回的HTML中所有data-dismiss="modal"属性替换为data-bs-dismiss="modal"，Bootstrap 5的内置关闭属性命名有变更

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