求助：在Aurelia中提交后如何关闭Bootstrap模态框

我来帮你搞定这个需求！当POST请求返回data == true时关闭id为AddNews的模态框，其实利用Bootstrap的内置方法就能轻松实现，下面是几种适配不同项目场景的方案：

方案1：用jQuery调用Bootstrap模态框API（适合已引入jQuery的项目） #

如果你的项目里已经用了jQuery，直接调用Bootstrap提供的modal('hide')方法就可以关闭模态框，修改你的TypeScript代码如下：

postData(object) { 
  httpClient.fetch('http://localhost:55265/api/*****', { 
    method: "POST", 
    body: JSON.stringify(object), 
    headers: { "Cache-Control": "no-cache" } 
  }) 
  .then(response => response.json()) 
  .then(data => { 
    console.log(data); 
    if (data == true) { 
      alert(`Saved!`); 
      // 这里添加关闭模态框的代码
      $('#AddNews').modal('hide'); 
    } else { 
      alert(`Error!`); 
    } 
  }); 
}

方案2：原生JavaScript实现（无需jQuery） #

要是你的项目没引入jQuery，也可以用Bootstrap的原生JS API，或者手动操作DOM（不过手动操作不推荐，优先用官方API）：

方法A：Bootstrap原生Modal实例（推荐） #

Bootstrap 4及以上版本支持原生JS实例化模态框，直接创建实例后调用hide()方法即可：

postData(object) { 
  httpClient.fetch('http://localhost:55265/api/*****', { 
    method: "POST", 
    body: JSON.stringify(object), 
    headers: { "Cache-Control": "no-cache" } 
  }) 
  .then(response => response.json()) 
  .then(data => { 
    console.log(data); 
    if (data == true) { 
      alert(`Saved!`); 
      // 获取模态框元素并关闭
      const modalElement = document.getElementById('AddNews');
      if (modalElement) {
        const modal = new bootstrap.Modal(modalElement);
        modal.hide();
      }
    } else { 
      alert(`Error!`); 
    } 
  }); 
}

注意：要确保你已经正确引入了Bootstrap的JS文件（比如bootstrap.bundle.min.js，它包含了Popper.js依赖）。

方法B：手动操作DOM类（应急用，不推荐） #

如果因为某些原因没法用官方API，也可以手动移除模态框的相关类来关闭，但这种方法可能导致Bootstrap内部状态不一致，尽量不用：

postData(object) { 
  httpClient.fetch('http://localhost:55265/api/*****', { 
    method: "POST", 
    body: JSON.stringify(object), 
    headers: { "Cache-Control": "no-cache" } 
  }) 
  .then(response => response.json()) 
  .then(data => { 
    console.log(data); 
    if (data == true) { 
      alert(`Saved!`); 
      const modalElement = document.getElementById('AddNews');
      if (modalElement) {
        // 移除模态框的显示类
        modalElement.classList.remove('show');
        // 移除body上的模态框激活类
        document.body.classList.remove('modal-open');
        // 删除背景遮罩层
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) backdrop.remove();
      }
    } else { 
      alert(`Error!`); 
    } 
  }); 
}

一些额外提醒 #

• 一定要确认Bootstrap的JS文件已经正确引入，不然模态框的方法会失效。
• 如果你的模态框是动态生成的，要保证调用关闭方法时，这个DOM元素已经存在于页面中。
• 可以考虑把alert换成Bootstrap的Toast组件，这样用户体验会更好哦！

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