[자바스크립트]sweet alert(알림 창),sweet confirm(선택)창 사용하기

SweetAlert을 이용한 알림창(Alert)

 

이쁜 Alert창 또는 Confirm창을 쓰고 싶다면 Sweet Alert창을 이용하면 된다

 

사용하는 방법은 간단하다!

 

 

 

1. Sweet Alert 플러그인 추가해주기 

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />

위에 js와 css를 추가해준다.

 

 

2. javascript 코드 작성하기

<script type="text/javascript">
	var alert = function(msg, type) {
		swal({
			title : '',
			text : msg,
			type : type,
			timer : 1500,
			customClass : 'sweet-size',
			showConfirmButton : false
		});
	}

	var confirm = function(msg, title, resvNum) {
		swal({
			title : title,
			text : msg,
			type : "warning",
			showCancelButton : true,
			confirmButtonClass : "btn-danger",
			confirmButtonText : "예",
			cancelButtonText : "아니오",
			closeOnConfirm : false,
			closeOnCancel : true
		}, function(isConfirm) {
			if (isConfirm) {
				swal('', '예약이 승인되었습니다.', "success");
			}else{
				swal('', '예약이 거부되었습니다.', "failed");
			}

		});
	}

	function Alert() {
		alert('gg', 'success');
	}
	function Confirm() {
		confirm('', '승인할까요?');
	}
</script>

 

 

3. HTML 코드 작성하기

<button onclick="Alert();">Alert</button>
<button onclick="Confirm();">Confirm</button>

 

 

SweetConfirm 화면

Sweet Confirm

 

 

 

감사합니다!

 

 

참고 사이트

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