[api] (javascript) Sweetalert2

Alert 창 중에 무료로 쓸만한 alter api를 찾다가 sweetalert를 접하게 되었습니다.

sweetalert에는 1, 2가 존재하는데, 1은 약 3년 전부터 upload가 되어있질 않더군요.

그래서 2를 사용하게 되었습니다.

 

Sweetalert2 사이트 주소

https://sweetalert2.github.io/

Sweetalert2 git 주소

https://github.com/sweetalert2/sweetalert2

 

Sweetalert2 cdn 주소

https://www.jsdelivr.com/package/npm/sweetalert2

 

cdn으로 전체 불러오기

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

 

기본 사용법

Swal.fire('Hello world!'); Swal.fire('Oops...', 'Something went wrong!', 'error');

Swal.file("success");로 주고 실행시켜 보니

이렇게 밖에 뜨지 않더군요. 그래서 살짝 모듈화를 시켜 보았습니다.

code

var swal = { 		error : function(data){ 			if(!data);} 			Swal.fire({ 				icon: 'error', 				title: typeof data.title !=='undefined' ? data.title : 'Oops...',  				text: !!data.text ? data.text : 'Something went wrong!', 				showConfirmButton : !!data.confirm ? true : false, 				timer: 1500 			}) 		}, 		success : function(data){ 			if(!data);} 				Swal.fire({ 					icon: 'success', 					title: !!data.title ? data.title : 'Success!!', 					text: !!data.text ? data.text : 'Your work has been saved!', 					showConfirmButton : !!data.confirm ? true : false, 					timer: 1500 				}) 		}, 		warning : function(data){ 			if(!data);} 			Swal.fire({ 				icon: 'warning', 				title: !!data.title ? data.title : 'Oops...',  				text: !!data.text ? data.text : 'You should do someting first!', 				showConfirmButton : !!data.confirm ? true : false, 				timer: 1500 			}) 		}, 		info : function(data){ 			if(!data);} 			Swal.fire({ 				icon: 'info', 				title: !!data.title ? data.title : 'Have to know!',  				text: !!data.text ? data.text : 'blablabla', 				showConfirmButton : !!data.confirm ? true : false, 				timer: 1500 			}) 		} 	}

 

이렇게 최상단의 jsp 파일에 추가해서 사용하면 원한는 값이 잘 나오는 것을 알 수 있습니다.

swal.success();

 

icon(type)에는 총 5가지 경우가 존재하고

 

원하신다면 modal을 활용한 창 역시 사용하실 수 있습니다.

그 외에 Swal.mixin({})을 활용해서 조금 더 다양한 효과를 줄 수도 있습니다.

const Toast = Swal.mixin({   toast: true,   position: 'top-end',   showConfirmButton: false,   timer: 3000,   timerProgressBar: true,   didOpen: (toast) => {     toast.addEventListener('mouseenter', Swal.stopTimer)     toast.addEventListener('mouseleave', Swal.resumeTimer)   } })  Toast.fire({   icon: 'success',   title: 'Signed in successfully' })

 

 

Uploaded by Notion2Tistory v1.1.0