Bootstrap 4 Modal保存按钮触发操作并关闭弹窗的实现方法

嘿，这个需求其实很好实现，Bootstrap 4自带的模态框API就能轻松搞定，我给你两种常用的方案，你可以根据自己的业务场景来选：

方法一：使用jQuery结合Bootstrap模态框API（推荐） #

首先给你的保存按钮加一个唯一ID，方便绑定点击事件，比如：

<button type="button" class="btn btn-primary" id="save-btn">保存更改</button>

然后在JS代码里绑定点击事件，先执行你的业务操作（比如表单验证、AJAX提交数据），完成后再调用Bootstrap的关闭方法：

$('#save-btn').click(function() {
  // 第一步：执行你的保存操作，这里以AJAX请求为例
  $.ajax({
    url: '/your-save-api',
    method: 'POST',
    data: { /* 这里传入你的表单数据或业务参数 */ },
    success: function(response) {
      // 操作成功后，关闭目标模态框
      $('#exampleModal').modal('hide');
      // 还可以加个成功提示，比如 alert('保存成功！')
    },
    error: function() {
      // 如果操作失败，提示用户且不关闭模态框
      alert('保存失败，请重试！');
    }
  });

  // 如果是无需异步的简单操作，直接写逻辑后关闭即可
  // 比如：console.log('执行本地保存逻辑');
  // $('#exampleModal').modal('hide');
});

方法二：使用原生JavaScript（不依赖jQuery） #

如果你不想用jQuery，也可以用原生JS实现，原理一致：

<button type="button" class="btn btn-primary" id="save-btn">保存更改</button>

document.getElementById('save-btn').addEventListener('click', function() {
  // 先执行保存操作，这里以fetch请求为例
  fetch('/your-save-api', {
    method: 'POST',
    body: JSON.stringify({ /* 传入你的业务数据 */ }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 操作成功后关闭模态框
    const modalElement = document.getElementById('exampleModal');
    const bootstrapModal = new bootstrap.Modal(modalElement);
    bootstrapModal.hide();
  })
  .catch(error => {
    alert('保存失败：' + error.message);
  });
});

注意事项 #

• 确保页面已正确引入Bootstrap 4的JS文件（用方法一的话还要引入jQuery）
• 一定要等保存操作完全完成（比如AJAX请求成功返回）后再关闭模态框，避免操作未执行完弹窗就关闭
• 如果模态框内有表单，建议先做表单验证，验证通过后再执行保存逻辑

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