[Alert]SweetAlert 사용하기

알림창을 띄울 때 alert을 주로 사용한다.  간단하게 사용할 수  있지만 UI적인 부분과 기능적인 요소가 부족하다.

 

 

SweetAlert을 사용하면 alert을 조금 더 예쁘게 꾸밀 수 있고, 커스터 마이징 할 수 있다.

 

SweetAlert?

SweetAlert makes popup messages easy and pretty.

https://sweetalert.js.org/

SweetAlert

 

warning

success

error

CDN

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

사용법

기존에 alert으로 호출하던 방식을 swal로 변경하여 사용하면 된다.

 

1. text

swal("Hello world!");

 

2. title, text

swal("Here's the title!", "...and here's the text!");

 

 

3. title, text, icon(success, info, warning, error)

swal("Good job!", "You clicked the button!", "success");

 

 

swal(title, text, icon) 형식을 가장 많이 사용한다. 필요에 따라 icon을 커스터 마이징 하거나 input을 사용한 방법들을 이용할 수 있다.

 

 

 

function sweetAlert(title, text, icon) {
    swal({
        title: title,
        text: text,
        icon: icon,
        buttons: '확인'
    }).then((value) => {
        if (value) {
          location.href = '/schedule?date='+$('#datepicker').val();
        }
    });
}