SweetAlert2 확인창 후 콜백 함수 실행하는 방법 (이벤트 처리 예제 포함)

SweetAlert2 알림창 이후 실행하는 콜백 이벤트에 대해서 자세한 설명과 예제 코드와 실행 여부를 확인해 보겠습니다. 기존 alert()보다 예쁜 알림창이고, 콜백 이벤트도 사용할 수 있습니다.

SweetAlert2 알림창 이후 콜백 이벤트 설명

예제소스

Swal.fire({
  title: "콜백 이벤트",
  text: "콜백 이벤트 만들기",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  cancelButtonColor: "#d33",
  confirmButtonText: "콜백실행",
  cancelButtonText: "취소"
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: "콜백!",
      text: "콜백 이벤트 알림",
      icon: "success"
    });
  }
});

Swal.fire({
  title: "콜백 이벤트",
  text: "콜백 이벤트 만들기",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  cancelButtonColor: "#d33",
  confirmButtonText: "콜백실행",
  cancelButtonText: "취소"
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: "콜백!",
      text: "콜백 이벤트 알림",
      icon: "success"
    });
  }
});

예제소스 실행 확인

설명

• 기준은 SweetAlert2 기본 사용법에서 result.isConfirmed의 조건을 추가 했습니다.
• Tip. console.log(result)를 해 보시면 몇가지 결과값을 출력해 주는데, 그 중 isConfirmed를 사용하시면 됩니다.
• isConfirmed 조건에 테스트로 Swal 알림창을 추가 했지만, 저 부분에 원하시는 코드로 변경하시면 됩니다.
• 제가 많이 사용했던 방법은 데이터를 삭제할 때, 한 번 더 확인하는 방법으로 많이 사용했습니다.
• 그 외 회원가입 폼 또는 데이터를 입력받을 때 사용해도 좋을 거 같습니다.