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

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

SweetAlert2 알림창 위치 기본 예제

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

알림창 위치 예제 코드

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

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

예제 실행

예제 코드 설명

• position : ‘top-end’는 화면 상단 오른쪽에 위치한다는 설정. 설정값 확인하기
• icon : ‘success’, ‘warning’, ‘error’, ‘info’, ‘question’ 5개의 아이콘 설정
• title : 알림창 제목 텍스트
• text : 알림창 내용 텍스트

position 항목별 정보

• top : 화면 상단 중앙
• top-start : 왼쪽 상단
• top-end : 오른쪽 상단
• center : 화면 정중앙 (기본)
• center-start : 화면 중앙 왼쪽
• center-end : 화면 중앙 오른쪽
• bottom : 하단 중앙
• bottom-start : 왼쪽 하단
• bottom-end : 오른쪽 하단

position 예제 실행

일정 시간 유지되는 알림창 사용법

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

코드 실행

코드 설명

• position : 알림창의 위치 설정. 설정값 확인하기
• showConfirmButton : ‘false’로 설정 시 확인 버튼 비 활성화. 기본값은 ‘true’
• timer : 일정 시간 유지하는 시간 설정. 1초는 1000으로 밀리초(ms)값.
  • 1500은 유지 시간이 1.5초로 설정

마무리

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

• 👉 관련 포스팅 : SweetAlert2 테마 커스터마이징 방법｜스타일 내 마음대로 꾸미기
• 👉 관련 포스팅 : SweetAlert2로 예쁜 Toast 알림 만들기｜간단한 JS 코드 예제 포함
• 👉 관련 포스팅 : SweetAlert2와 Fetch API 연동｜사용자 입력 후 서버 요청 처리 예제
• 👉 관련 포스팅 : SweetAlert2에서 입력값 받아오기｜사용자 입력 처리 방법과 예제
• 👉 관련 포스팅 : SWAL 사용법! SweetAlert2 예쁜 팝업 정복하기

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