从模态框打开新确认模态框且不关闭原框的实现问题

我明白你的需求——点击第一个模态框的「取消」时，不能直接关掉它，而是弹出第二个确认框让用户做最终选择：选「是」就彻底退出，选「否」就回到第一个模态框继续操作。这个问题的核心是阻止第一个模态框的默认关闭行为，然后手动控制两个模态框的显示逻辑。

下面我用Bootstrap 5的模态框为例给你写个完整的实现方案（原理同样适用于其他UI框架或自定义模态框）：

第一步：HTML结构调整 #

首先，把第一个模态框的取消按钮去掉默认的data-bs-dismiss="modal"属性（这个属性会自动关闭模态框），换成自定义ID方便绑定事件：

<!-- 主流程模态框 -->
<div class="modal fade" id="mainModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">流程操作</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这里是你的主流程表单/内容...
      </div>
      <div class="modal-footer">
        <!-- 取消按钮去掉默认关闭属性，加自定义ID -->
        <button type="button" class="btn btn-secondary" id="btnCancelMain">取消</button>
        <button type="button" class="btn btn-primary">确认提交</button>
      </div>
    </div>
  </div>
</div>

<!-- 退出确认模态框 -->
<div class="modal fade" id="confirmExitModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认退出</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        你确定要退出当前流程吗？未保存的内容会丢失哦。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="btnNoExit">否</button>
        <button type="button" class="btn btn-primary" id="btnYesExit">是</button>
      </div>
    </div>
  </div>
</div>

第二步：JavaScript逻辑控制 #

接下来我们手动绑定事件，完全掌控两个模态框的显示/隐藏：

// 初始化两个模态框实例
const mainModal = new bootstrap.Modal('#mainModal');
const confirmModal = new bootstrap.Modal('#confirmExitModal');

// 主模态框取消按钮点击事件
document.getElementById('btnCancelMain').addEventListener('click', () => {
  // 不关闭主模态框，直接弹出确认框
  confirmModal.show();
});

// 确认框「是」按钮：关闭两个模态框，结束流程
document.getElementById('btnYesExit').addEventListener('click', () => {
  confirmModal.hide();
  mainModal.hide();
  // 这里可以加一些流程结束后的逻辑，比如重置表单、跳转到其他页面等
});

// 确认框「否」按钮：只关闭确认框，主模态框保持显示
document.getElementById('btnNoExit').addEventListener('click', () => {
  confirmModal.hide();
});

核心原理说明 #

1. 拦截默认关闭：去掉取消按钮的data-bs-dismiss，避免它自动关闭主模态框；
2. 手动控制模态框：通过框架提供的show()/hide()方法，精准控制什么时候显示哪个模态框；
3. 分支逻辑处理：根据用户在确认框的选择，执行不同的操作——要么关闭所有模态框，要么只关闭确认框回到主流程。

如果是用其他框架（比如jQuery UI、Ant Design等），思路完全一致：找到拦截模态框关闭的方法，然后手动触发第二个模态框，最后根据用户选择处理主模态框的状态。

内容的提问来源于stack exchange，提问作者Paul F.