jquery-confirm多弹窗问题：表单提交时需按顺序触发弹窗

嘿，你遇到的核心问题是**$.confirm是异步执行的**——它不像原生的confirm()那样会阻塞后续代码运行。所以你原来的代码里，第一个弹窗刚初始化完成，后面的检查逻辑和第二个弹窗的代码就立刻执行了，导致两个弹窗同时弹出来。

要实现按顺序触发弹窗，你需要把后续的所有逻辑（包括其他检查步骤、第二个确认弹窗）放到第一个弹窗的OK按钮回调函数里。这样只有当用户点击第一个弹窗的OK后，才会继续执行后续流程。

下面是修改后的完整代码：

// 表单提交处理函数
function handleFormSubmit() {
  $.confirm({ 
    title: 'Confirm 1',
    content: 'No products added. Are you sure to proceed?',
    buttons: { 
      ok: { 
        text: "OK", 
        btnClass: 'btn-success', 
        action: function () { 
          // 第一个弹窗确认后，执行后续检查逻辑
          let proceed = true;
          
          // --- 这里放入你的其他检查逻辑 ---
          // 示例：如果某个条件不满足，设置proceed为false
          // if ($('#someInput').val() === '') {
          //   proceed = false;
          //   $.alert('请填写必要信息');
          // }

          if (!proceed) {
            return; // 终止后续流程
          }

          // 所有检查通过，弹出最终确认弹窗
          $.confirm({ 
            title: 'Final confirm',
            content: 'All checks are ok. Are you sure to insert?',
            buttons: { 
              ok: { 
                text: "OK", 
                btnClass: 'btn-success', 
                action: function () { 
                  $('form').submit(); // 提交表单
                } 
              }, 
              cancel: { 
                text: "Cancel", 
                action: function () { 
                  // 取消操作，仅关闭弹窗
                } 
              } 
            } 
          });
        } 
      }, 
      cancel: { 
        text: "Cancel", 
        action: function () { 
          // 用户取消，直接终止流程
          return false; 
        } 
      } 
    } 
  });

  // 阻止表单默认提交行为，完全由弹窗逻辑控制提交时机
  return false;
}

// 绑定表单提交事件
$('form').on('submit', handleFormSubmit);

关键改动说明： #

• 将后续所有流程移入第一个弹窗的ok回调，确保执行顺序依赖用户的确认操作
• 表单提交处理函数最后返回false，阻止浏览器默认的表单提交行为
• 把proceed变量改为局部变量，避免全局变量带来的潜在问题

内容的提问来源于stack exchange，提问作者Giuseppe Lodi Rizzini