SWAL 사용법! SweetAlert2 예쁜 팝업 정복하기

지난 시간에는 SweetAlert2의 기본 설정하는 방법과 공식 사이트에서 제공하는 간단한 소스와 버튼을 통해 예시를 알려드렸습니다. 이번 시간에는 약간의 커스텀을 해서 사용하는 방법에 대해서 알려드리는데, 제가 제일 많이 사용했던 방법을 알려드리도록 하겠습니다.

예제로 알아보는 Swal 사용법

닫기 버튼 대신 사용하는 닫기 버튼

알림창을 닫게 할 경우 닫기 버튼 또는 알림창 외 영역을 클릭하면 알림창이 닫게 됩니다. 이번 예제는 알림창 상단 오른쪽에 엑스 버튼 클릭 시 닫게 하는 방법에 대해서 알아보겠습니다.

예제코드

Swal.fire({
  title: "기본",
  text: "기본 알림창,
  icon: "success",
  allowOutsideClick: false, //  알림창 영역 외 클릭 금지(false)
  showCloseButton: true // 알림창 상단 오른쪽에 닫기 엑스 링크 추가(true)
});

Swal.fire({
  title: "기본",
  text: "기본 알림창,
  icon: "success",
  allowOutsideClick: false, //  알림창 영역 외 클릭 금지(false)
  showCloseButton: true // 알림창 상단 오른쪽에 닫기 엑스 링크 추가(true)
});

JavaScript

예제확인

해당 예제는 Swal 사용법 중 알림창을 다는 방식을 하단의 아래 버튼으로 처리하는 걸 알림창 상단 오른쪽에 엑스(X) 버튼으로 처리하는 방식으로 변경했고, 알림창 외 클릭 시 알림창을 닫게 하는 기능을 false 처리한 예제입니다. 생각보다 이 예제를 많이 사용했습니다.

일정 시간 후 자동 닫힘 알림창

알림창을 사용자 액션 없이 사용하고 싶을 때, 또는 그 알림창이 알림을 보여주고 특정 시간이 지나면 자동으로 닫히게 하는 Swal 사용법에 대해서 알아보겠습니다. 이것도 생각보다 많이 사용했습니다.

예제코드

Swal.fire({
  position: "top-end",
  icon: "success",
  title: "처리가 완료되었습니다.",
  showConfirmButton: false,
  timer: 1500
});

Swal.fire({
  position: "top-end",
  icon: "success",
  title: "처리가 완료되었습니다.",
  showConfirmButton: false,
  timer: 1500
});

JavaScript

예제확인

소스설명

position : 알림창의 위치를 설정합니다. 총 9가지 Swal 사용법 확인하기
icon : 알림창의 아이콘을 설정합니다. 총 5가지 Swal 사용법 확인하기
title : 알림창 제목으로 <h2>에 해당되는 글꼴입니다.
text : 알림창의 내용으로 기본 글꼴입니다.
showConfirmButton : 알림창 기본 버튼으로 true가 기본 설정인데, 여기서는 자동으로 닫히는 알림창이랑 false 설정을 했습니다.
timer : 마지막으로 해당 알림창의 핵심으로 알림창이 열린 후 닫힐 때까지의 시간 설정입니다. 1000에 1초입니다. 현재 1500으로 1.5초 설정 되어있습니다.

마무리

이번 시간에도 Swal 사용법 중 개인적으로 제일 많이 사용했던 것을 예제 코드로 다시 확인해 봤습니다. 다음 시간에도 이 예쁜 알림창을 사용하는 방법에 대해서 알아보겠습니다.

🚩예쁜 alert 모달창 사용법 SweetAlert2