SweetAlert2

https://sweetalert2.github.io/

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes

사이트에서는 sweetalert을 스스로 이렇게 소개하고 있다.

간단하게 여러 주제에 대한 다양한 색감과 디자인의 창을 지원해 주는 라이브러리로 볼 수 있다.

<1> 사용 방법

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>```

위의 방법으로 CSS, JS 스크립트를 가져옴으로 이용할 수 있다.

<2> 사용 용례와 예시 템플릿

// ALERT
Swal.fire({
  title: 'ALERT TITLE',
  text: 'ALERT TEXT'
  icon: 'success',
});

// CONFIRM
Swal.fire({
   title: 'CONFIRM TITLE',
   text: 'CONFRIM TEXT',
   icon: 'warning',
   
   showCancelButton: true, // default: false
   confirmButtonColor: '#3085d6', 
   cancelButtonColor: '#d33', 
   confirmButtonText: '승인',
   cancelButtonText: '취소',
   
   reverseButtons: true, // 버튼 순서 거꾸로
   
}).then(result => {
   if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
		// CONFIRMED FLOW   
   }
});

// PROMPT
(async () => {
    const { value: getName } = await Swal.fire({
        title: 'PROMPT TITLE',
        text: 'PROMPT TEXT',
        input: 'text',
        inputPlaceholder: 'press ..'
    })

    // next flow

})()

// TOAST MESSAGE
const Toast = Swal.mixin({
    toast: true,
    position: 'center-center',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

Toast.fire({
    icon: 'success',
    title: 'TOAST TITLE'
})

그 이외에도 IMAGE, AJAX 등등을 지원해준다.

<3> icon 타입

'success'
'error'
'warning'
'info'
'question'