在 SweetAlert2 上选择“取消”时如何防止模式关闭？

Question

我不希望当我单击“取消（删除）”按钮时关闭模式，仅当失去焦点或单击关闭按钮时才关闭。如何防止关闭？

Answer 1

默认的取消按钮用于关闭对话框。您可以将自定义按钮添加为 html，并手动处理其单击事件，而不是将该按钮用于其他任务：（实时运行）

var onBtnClicked = (btnId) => {
  // Swal.close();
  alert("you choosed: " + btnId);
};
Swal.fire({
  title: "What you want to do?",
  icon: "warning",
  showConfirmButton: false,
  showCloseButton: true,
  html: `
     <p>select an action</p>
    <div>
      <button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
      <button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
    </div>`
});

Answer 2

在用于拒绝和确认操作的 swal 的新版本中，您可以在 preConfirm 和 preDeny 函数中返回 false 以防止模式关闭，例如：

Swal.fire({
        icon: 'error',
        title: 'Title',
        footer: 'Footer text',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: true,
        showDenyButton: true,
        confirmButtonText: 'Confirm',
        denyButtonText: 'Deny',
        preConfirm: () => {
            console.log('Confirm pressed!');
            return false;
        },
        preDeny: () => {
            console.log('Deny pressed!');
            return false;
        },