使用SweetAlert替代原生confirm弹窗遇阻，求技术指导

原代码核心问题 #

• 语法错误：confirmButtonColor: "##DD6B55" 多了一个#，正确写法为 "#DD6B55"
• 异步逻辑误解：新版SweetAlert是异步操作，无法像同步的confirm()那样直接通过变量赋值获取返回值，必须用回调函数或Promise处理后续逻辑
• 参数过时：旧版的closeOnConfirm参数在新版中已被替换，可通过allowClose或按钮配置控制弹窗关闭行为

场景1：替换删除确认函数ConfirmDelete(id) #

将同步confirm()改为SweetAlert的异步回调逻辑，同时修正原URL格式错误：

function ConfirmDelete(id){
  swal({
    title: "确认删除？",
    text: "are you sure!!",
    icon: "warning", // 新版用icon替代旧版type参数
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "确认删除",
    cancelButtonText: "取消"
  }).then((isConfirm) => {
    // 点击确认时执行跳转
    if (isConfirm) {
      location.href = 'page2.php?id=' + id;
    }
  });
}

注：原代码中location='page2.php='+id的URL格式不符合GET参数规范，已修正为page2.php?id=

场景2：直接返回confirm的场景 #

由于SweetAlert是异步的，无法直接返回布尔值（同步逻辑），需调整调用逻辑，以下是两种常见场景的实现：

表单提交前确认 #

<form onsubmit="return handleSubmit(event)">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script>
function handleSubmit(e) {
  e.preventDefault(); // 先阻止默认提交行为
  swal({
    title: "确认操作？",
    text: "are you sure",
    icon: "question",
    showCancelButton: true
  }).then((isConfirm) => {
    if (isConfirm) {
      e.target.submit(); // 确认后再提交表单
    }
  });
  return false; // 阻止默认同步提交
}
</script>

链接点击确认 #

<a href="page3.php" onclick="return handleLinkClick(event)">跳转链接</a>

<script>
function handleLinkClick(e) {
  e.preventDefault();
  const targetHref = e.target.href;
  swal({
    title: "确认跳转？",
    text: "are you sure",
    icon: "question",
    showCancelButton: true
  }).then((isConfirm) => {
    if (isConfirm) {
      location.href = targetHref;
    }
  });
  return false;
}
</script>

关键注意事项 #

• 确保引入最新版SweetAlert2（原SweetAlert已停止维护），引入示例：

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  

• 所有依赖弹窗结果的逻辑必须放在then()回调中，不能像同步confirm()那样直接赋值使用
• 旧版参数（如type、closeOnConfirm）在新版中已替换为icon、allowClose等，需匹配新版参数规范

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