How can I prevent closing of the modal when 'Cancel' is selected on SweetAlert2?

Question

I don't want the modal to close when I click the 'cancel(delete)' button, only when losing focus or close button is clicked. How can I prevent closing?

Answer 1

The default cancel button is for closing the dialog. instead of hacking that button for another task, you can add custom buttons as html, and handle their click events manually: (Run it live)

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>`
});