SweetAlert2 알림창 위치 사용법｜원하는 위치에 알림창 띄우기

SweetAlert2는 예쁜 디자인과 뛰어난 커스터마이징 기능을 갖춘 반응형 알림창 라이브러리입니다. 이번 글에서는 알림창 위치를 자유롭게 조정하는 사용법과, 일정 시간 후 자동으로 사라지는 알림창 설정 방법을 자세히 소개합니다.

SweetAlert2 알림창 위치 기본 예제

SweetAlert2 알림창의 기본 사용 예제에 위치 설정값을 추가해 보며, 화면상 어디까지 위치 변경이 가능한지 알아봅니다. 또한 일정 시간 후 자동으로 사라지는 알림창 사용법도 예제로 함께 소개합니다.

Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: '저장 완료!',
  text: '게시물이 저장 되었습니다.'
});

Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: '저장 완료!',
  text: '게시물이 저장 되었습니다.'
});

JavaScript

SweetAlert2 알림창을 일정 시간 유지한 뒤 자동으로 사라지도록 설정하는 사용법을 소개합니다. 사용자에게 간단한 안내 메시지를 전달할 때 특히 유용하게 활용할 수 있습니다.

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

SweetAlert2는 디자인이 예쁘고 활용도가 높은 알림창 라이브러리입니다. 글을 쓰면서 저 역시 더 다양한 활용 아이디어가 떠오르네요. 다음 포스팅에서는 알림창 커스터마이징 방법을 좀 더 깊이 있게 소개해 드릴게요.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”