点击SweetAlert的Back按钮关闭Bootstrap 5 Modal的实现方案

点击SweetAlert弹窗的「Back」按钮时，需要关闭Bootstrap 5的模态框，但使用modal.hide()无效，求可行方案。

相关代码： #

// inside of handleSubmit function
swal({
  title: "Great!",
  text: "Job updated successfully!",
  icon: "success",
  buttons: {
    back: {
      text: "Back",
      value: "back",
    },
  },
}).then((value) => {
  if (value === "back") {
    // 此处原代码尝试modal.hide()无效
  }
});

return (
  <div id="edit_job" className="modal custom-modal fade" role="dialog">
    <div className="modal-dialog modal-lg" role="document">
      <button type="button" className="close" data-bs-dismiss="modal">
        ×
      </button>
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title">Edit Job</h5>
          <button
            type="button"
            className="close"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div className="modal-body">
          {/* form content */}
        </div>
      </div>
    </div>
  </div>
);

Bootstrap 5弃用了jQuery依赖，必须通过官方提供的模态框实例来控制显示/隐藏，直接调用modal.hide()无效是因为没有正确获取实例。

实现步骤： #

1. 通过模态框的ID获取对应的DOM元素
2. 使用bootstrap.Modal.getOrCreateInstance()方法获取或创建模态框实例（如果实例已存在则直接返回，不存在则创建）
3. 调用实例的hide()方法关闭模态框

修改后的代码： #

// inside of handleSubmit function
swal({
  title: "Great!",
  text: "Job updated successfully!",
  icon: "success",
  buttons: {
    back: {
      text: "Back",
      value: "back",
    },
  },
}).then((value) => {
  if (value === "back") {
    // 获取模态框实例并关闭
    const editJobModal = document.getElementById('edit_job');
    const modalInstance = bootstrap.Modal.getOrCreateInstance(editJobModal);
    modalInstance.hide();
  }
});

补充说明： #

• getOrCreateInstance方法会自动处理模态框实例的创建，无需手动初始化
• 如果你的项目中使用了React，也可以通过useRef来获取模态框DOM元素，避免重复查询DOM：

  const editJobModalRef = useRef(null);
  
  // 在SweetAlert的回调中：
  const modalInstance = bootstrap.Modal.getOrCreateInstance(editJobModalRef.current);
  modalInstance.hide();
  
  // 模态框元素上添加ref：
  <div ref={editJobModalRef} id="edit_job" className="modal custom-modal fade" role="dialog">
  

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