SweetAlert2 버튼 이벤트

이쁘고 커스터마이징 가능한 반응형 자바스크립트 대체 팝업창 

 

 

기존 Native Javascript Alert 창이 예쁘지 않다고 생각한다면, sweetalert2를 이용해서 간편히 예쁜 Alert 창을 띄울 수 있다.

사용법도 어렵지 않고 몇 가지만 알면 바로 사용 가능하기 때문에 디자인에 소질이 없는 나 같은 사람에게는 아주유용한 라이브러리다. 

 

다운로드 방법

아래 SweetAlert2 공식 홈페이지에서 다운로드할 수 있다. 

https://sweetalert2.github.io/ 

SweetAlert2

 

적용 방법

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

npm으로도 적용 가능하지만 node.js는 아직 경험이부족한지라, 그냥 CDN 링크를 걸어서 쓰려다가 다운로드 받아서 직접 프로젝트 내에 파일을 복사해서 사용하고 있다.

 
공식 사이트에 접속해서 공식 스폰서를 보면 어딘지 이상해서 혹시 사라질까봐 나는 cdn을 사용하지 않고 그냥 다운받은 파일을 복사해서 사용하고 있다.

 

 

Icon 종류

• warning
• error
• success
• info
• question

 

기본 사용 방법 예제 (샘플 코드)

$(document).on('click', '.btn-remove', function(){
	var rq = {};
	rq.board_id = Number(board_id);

    Swal.fire({
           title: '게시글 삭제',
           text: '데이터 베이스에서 삭제 되며 복구되지 않습니다. 정말 삭제 하시겠습니까?',
           icon: 'warning',

           showCancelButton: true, // cancel버튼 보이기. 기본은 원래 없음
           confirmButtonColor: '#000', // confrim 버튼 색깔 지정
           //cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
           confirmButtonText: '삭제', // confirm 버튼 텍스트 지정
           cancelButtonText: '취소', // cancel 버튼 텍스트 지정

           //reverseButtons: true, // 버튼 순서 거꾸로

    }).then(result => {
       if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
           sendXMLHttpRequest("POST", contextPath + "url", JSON.stringify(rq), sBoardDelete, COM_AjaxFailCallBack);
        }
    });
});

 

• showCancelButton 옵션을 true로 주면 cancel 버튼을 보이게 할 수 있다. 기본값은 False
• confirmButtonColor 옵션으로 버튼 색깔을 지정할 수도 있고, confirmButtonText 옵션으로 버튼의 텍스트도 지정 가능하다.
• Swal.fire() 를 호출하게 되면 SweetAlertResult 오브젝트에 결과를 받을 수 있기 때문에 사용자가 Confirm(여기서는 '삭제')을 누르면 result 값의 isConfirmed를 통해 confirm이 되었는지를 체크해서 다음 작업을 처리하면 된다.

[참고] isConfirmed 외 isDenied와 isDismissed도 같은 방식으로  처리 가능하다.
 

결과물

 

 

반응형

 

 

버튼 선택이 끝날 때까지 기다린 후 다음 액션 처리

Sweet Alert에서 Swal.fire로 Alert을 띄우는 코드를 작성하고 다음 라인에 바로 다음 실행할 코드를 작성하면 정상적으로 작동하지 않는다. 특히 location.href.

Confirm이나 Cancel 등 버튼을 클릭하고 난 뒤에 다음 함수를 실행할 경우는 then을 사용한다.

 

잘못 된 코드

function sample(data){
    Swal.fire("등록 완료!", "게시물이 등록 되었습니다.", "success");
    location.href='somewhere';
}

 

올바른 코드

function sBoardAdd(data){
    Swal.fire("등록 완료!", "게시물이 등록 되었습니다.", "success").then(function(){
    	location.href='somewhere';
    });
}

 

결과물

 

 

 

 

참고

고전적인 방법이 필요할 땐 native javascript로도 처리할 수도 있어야 하니 기록해 두자.

 

1. confirm (확인 취소버튼이 있는 대화상자)

function confirm_test(){
	if(confirm("확인하세요!") == false){
		return;
		//취소버튼을 눌렀을경우 빠져나감..
	}else{
		alert("확인되었습니다!");
		//그외에는 "확인되었습니다!" 라는 메세지를 띄움.
	}
}

2. prompt (입력상자가 있는 대화상자)

function prompt_test(){
	pro = prompt("메세지내용","출력내용");
	if(pro == "데이터"){
		alert("데이터");
	}else{
		alert("----------------");
	}
}