[자바스크립트] sweetalert 사용하기 (alert, confirm, ajax)

라이브러리 추가로 인해 alert을 대체할 수 있는 sweetalert을 소개합니다.

 

아래 소스코드는 sweetalert으로 confirm창을 띄우고 ajax 통신으로 성공/실패를 sweetalert으로 나타내고 있다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
$(function() {
	swal({
		title: "등록하시겠습니까?",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "예",
		cancelButtonText: "아니요",
		closeOnConfirm: false,
		closeOnCancel : true
	}, function (isConfirm) {
		if (!isConfirm) return;
		jQuery.ajax({
			type : "POST",
			url : "",
			data : "",
			cache: false,
			dataType : "json",
			success : function(data) {
				swal("성공", "작업을 정상적으로 완료하였습니다.", "success");
			},
			error : function(e) {
				swal("실패", "작업수행에 실패하였습니다.", "error");
			}, timeout:100000
		});
	});
});
</script>

 

sweetalert으로 confirm창 구성

ajax 성공시 sweetalert 성공메시지

ajax 실패시 sweetalert 메시지

sweetalert의 다양한 옵션들은 아래의 사이트에서 확인 하실수 있습니다.

https://sweetalert.js.org/

SweetAlert