SweetAlert 적용하기

수정, 삭제 시 기본 Alert창에 SweetAlert을 적용했다.

승인버튼을 누르고 다음 Alert창에서 버튼없이 알아서 사라지게 하려고 setTimeout함수를 이용했다.

 

<script type="text/javascript">
	let delete_btn = document.getElementById('delete_btn'); //delete_btn에 접근
	 
	delete_btn.onclick=function(){
		Swal.fire({
			title: '정말로 삭제 하시겠습니까?',
			text: '다시 되돌릴 수 없습니다. 신중하세요!',
			icon: 'warning', //success,error,warning,info
			showCancelButton: true, // cancel버튼 보이기. 기본은 원래 없음
			confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
			cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
			confirmButtonText: '승인', // confirm 버튼 텍스트 지정
			cancelButtonText: '취소', // cancel 버튼 텍스트 지정
			//reverseButtons: true, // 버튼 순서 거꾸로
			closeOnClickOutside: false,//창 제외하고 다른 곳 클릭시 창안닫히도록
			closeOnEsc: false//esc키 안먹히도록(기본true)
		}).then(result => {
			if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
			Swal.fire({
					title:'삭제가 완료되었습니다.',
					icon: 'success',
					showConfirmButton: false});
	      	setTimeout(function(){
				location.replace('delete.do?chatboard_num=${chatboard.chatboard_num}');
				}, 1000);
	      	}else if (result.iscancel) {
	      		location.replace('detail.do?chatboard_num=${dchatboard.chatboard_num}');
	      	}
	    })
	};
</script>

 

<script type="text/javascript">
	$(function() {
		update_action = function() {
			if ($('#title_chat').val() == '') {
				alert('제목을 입력하세요!');		
				return;
			}
			if ($('#content_chat').val() == '') {
				alert('내용을 입력하세요!');
				return;
			}
			if ($('#title_chat').val() != '' && $('#content_chat').val()!= '' ) {
				 Swal.fire({
			            title: ' ',
			            text: '게시글을 수정했습니다.',
			            imageUrl: '${pageContext.request.contextPath}/resources/images/ok_icon.png',
			            imageWidth: 70,
			            imageHeight: 70,
			            imageAlt: 'Custom image',
			            confirmButtonColor: '#84d7fa',
			            confirmButtonText: '확인',
			            width: 400,
			            padding: '2em'
			        }).then((result) => {
			            if (result.isConfirmed) {
			            	 $('#update_form').submit();
			            }
			        }) 
			}
		}
		
	});
</script>

입맛에 따라 약간의 커스텀이 가능하다.

 

 

 

https://webisfree.com/2014-04-08/[javascript]-%EC%8B%9C%EA%B0%84-%EC%A7%80%EC%97%B0-%ED%95%A8%EC%88%98-%EC%9D%BC%EC%A0%95-%EC%8B%9C%EA%B0%84-%EB%92%A4-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0-settimeout()-%7B%7D 

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}

https://blog.naver.com/10hsb04/221714175649

[Spring] SweetAlert (예쁜 alert 창 사용하기!)

https://inpa.tistory.com/entry/SweetAlert2-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

[SweetAlert2] 📚 이쁜 알람창 sweet alert 설치 & 사용