SweetAlert으로 Alert창 꾸미기 (사용법과 사용예제)

 

프로젝트를 진행하면서 로그인하거나 그 외에 alert창을 띄울 때, 디자인을 추가하고 싶다는 생각을 하다가 발견 한 sweetalert!

사용법이 매우 매우 간단하다

 

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

 

 

터미널에 직접 설치하는 방법도 존재하지만 난 jsp 페이지에 script를 추가하는 방식으로 사용하였다

 

 

 

 

사용 방식은,

alert 대신 swal을 사용해줘야 한다.

 

swal('타이틀', '내용', '아이콘'); 형식으로 작성해주면 되는데, 밑에 실제로 내가 사용 한 예제를 추가해봤다

 

 

 

 

swal('로그인 성공!', data.login.result.name+"님 로그인되었습니다.", 'success')

 

 

 

 

swal('로그인 실패!', "아이디와 비밀번호를 확인해 주세요", 'warning');

 

 

그런데 이런 식으로 만 작성하면 OK 버튼을 클릭하기도 전에, 지정해놨던 경로로 순식간에 넘어가버린다 (alert창을 못 볼 정도로

빠르게 이동해버림) 그래서 swal 작성 후,. then을 붙여서 그다음에 동작할 코드를 작성해줘야 한다.

 

swal('로그인 성공!',data.login.result.name+"님 로그인되었습니다.",'success')
.then(function(){
	location.href="${pageContext.request.contextPath}/main.do";                   
})

} else {
	swal('로그인 실패!',"아이디와 비밀번호를 확인해 주세요",'warning');
};

 

 

이렇게. then(function() { }) 안에 원하는 코드 (위에선 OK 버튼 클릭하면 메인 페이지로 경로 이동)를 추가하면

잘 작동되는 걸 확인할 수 있다

 

 

https://sweetalert.js.org/guides/

SweetAlert