使用TypeScript阻止Bootstrap模态框关闭的实现方案

DevOps 小满

2026-8-15

解决方案

核心思路

Bootstrap的data-bs-dismiss="modal"会直接触发模态框关闭，不受自定义校验逻辑控制。正确的做法是移除该属性，通过Bootstrap官方的Modal API手动控制模态框的关闭时机，同时在TypeScript中处理类型安全问题。

步骤1：修改HTML按钮

移除按钮上的data-bs-dismiss="modal"属性，保留原id和样式：

<button id="resIFS" class="btn btn-primary">Save and Reset</button>

步骤2：TypeScript实现逻辑

先确保已安装Bootstrap的类型定义（npm环境下执行npm install @types/bootstrap --save-dev），再编写以下代码：

import { Modal } from 'bootstrap';

// 获取模态框和按钮元素，处理TypeScript非空校验
const ifsModalElement = document.getElementById('ifsModal');
const resIFSButton = document.getElementById('resIFS');

if (ifsModalElement && resIFSButton) {
  // 创建Bootstrap Modal实例
  const ifsModal = new Modal(ifsModalElement);

  // 绑定按钮点击事件
  resIFSButton.addEventListener('click', () => {
    // 自定义条件校验逻辑，替换成你的实际校验
    const isValid = validateFormInputs();

    if (isValid) {
      // 校验通过，执行原resIFS逻辑并关闭模态框
      resIFS();
      ifsModal.hide();
    } else {
      // 校验不通过，阻止关闭，可添加错误提示
      alert('校验未通过，请检查输入内容');
      // 其他错误处理逻辑（比如高亮错误字段）
    }
  });
}

// 原有的Save and Reset逻辑函数
function resIFS() {
  // 你的保存、重置业务代码
}

// 示例校验函数，返回布尔值表示校验结果
function validateFormInputs(): boolean {
  // 模拟校验逻辑，比如检查输入框是否为空
  const targetInput = document.getElementById('targetInput');
  return targetInput?.value?.trim() !== '';
}