🚩예쁜 alert 모달창 사용법 SweetAlert2

자바스크립트에서 기보 사용하는 alert()를 예쁜 alert()로 꾸며주는 SweetAlert를 사용하는 방법과 몇 가지 예시를 알아보겠습니다. 간단하게 설치할 수 있고, 사용법도 간편하고, 기능도 다양하게 있습니다.

SweetAlert2 설치 및 사용법

SweetAlert2(웹사이트 바로가기)는 자바스크립트의 기본 alert()에서 예뻐진 버전입니다. 간단하게 CDN으로 <head></head> 사이에 추가만 해주면 사용이 간편합니다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

jsDelivr CDN 바로가기

기본 사용법

제가 제일 많이 사용하는 방법을 알아보고, 이후 기능들을 추가해서 사용하는 방법에 대해서 하나씩 알아보겠습니다.

Swal.fire({title:'기본', text:'기본 알림창', icon:'success'});

Swal.fire({title:'기본', text:'기본 알림창', icon:'success'});

icon 종류 5가지

icon은 success, error, warning, info, question 이렇게 5가지가 있습니다. 꼭 소문자로 사용해주세요! 대문자는 안됨.

Swal.fire({title:'기본', text:'기본 알림창', icon:'success'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'error'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'warning'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'info'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'question'});

Swal.fire({title:'기본', text:'기본 알림창', icon:'success'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'error'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'warning'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'info'});
Swal.fire({title:'기본', text:'기본 알림창', icon:'question'});

일정시간 후 닫히는 창

화면의 9곳의 위치를 정의할 수 있으며, 일정시간 후 닫혀 버리는 alert() 창으로 생각보다 많이 사용했던 기능입니다. ‘top’, ‘top-start’, ‘top-end’, ‘center’, ‘center-start’, ‘center-end’, ‘bottom’, ‘bottom-start’, ‘bottom-end’ 이렇게 9곳 위치 설정이 가능합니다.

Swal.fire({
  position: "top-end",
  icon: "success",
  title: "Your work has been saved",
  showConfirmButton: false,
  timer: 1500
});

Swal.fire({
  position: "top-end",
  icon: "success",
  title: "Your work has been saved",
  showConfirmButton: false,
  timer: 1500
});

배경 클릭 이벤트 막는 방법

알림창이 호출된 후 배경 클릭 시 알림창이 닫히는 기능을 막는 방법입니다. 아주 유용하게 사용하고 있는 기능입니다. allowOutsideClick 의 기본은 ‘true’로 되고, ‘false‘로 설정시 배경을 클릭을 막아 줍니다.

Swal.fire({title:'기본', text:'기본 알림창', icon:'success', allowOutsideClick: false});

Swal.fire({title:'기본', text:'기본 알림창', icon:'success', allowOutsideClick: false});

JavaScript

SweetAlert2(웹사이트 바로가기) 사이트를 방문하시면 더 많은 예제와 기능 설정에 대한 설명이 영어로 잘 작성이 되어있습니다. 번역해서 확인 하시면 됩니다.

자주 묻는 질문❓

SweetAlert2는 꼭 CDN으로만 사용해야 하나요?

아닙니다. 빠르게 사용이 가능한 건 CDN 방식이고요. 코들 다운받아서 적용할 사이트에 업로드해서 사용하셔도 됩니다.
🧷 jsDelivr에서 다운로드 받기