alert, confirm,loding,page block sweetalert2 이용하기

alert, confirm 메시지 출력시 브라우저 마다 다른 디자인이 노출되고 딱딱한 느낌이 강해서 sweetalert2을 이용 메시지 출력을 진행 하려고 알아 보았습니다.

 

모든 내용은 https://sweetalert2.github.io 참고 해서 작업 진행 했습니다.

 

-- alert

var ToastAlert = Swal.mixin({
       showConfirmButton: true
});

기본 설정을 Swal.mixin 을 이용해서 정의 해줍니다.

사용하려는 페이지 에서 ToastAlert.fire({icon: 'warning', title: '알림메시지'}); 와  같이 icon, title, text 같이 변경이 필요한 부분만 추가 해주면 됩니다.

 

--confirm

var ToastConfirm = Swal.mixin({
   showConfirmButton: true,
   showCancelButton: true,
   confirmButtonText : "예",
   cancelButtonText : "아니오"
});

기본 설정을 Swal.mixin 을 이용해서 정의 해줍니다. 보면 알 수 있는 내용이지만 옵션은 아래와 같습니다.

(

showConfirmButton=>확인버튼 출력 여부(기본 true)

showCancelButton=>취소버튼 출력 여부(기본 false)

confirmButtonText=>확인버튼 내용

cancelButtonText=>취소버튼 내용

)

사용하려는 페이지에서 

ToastConfirm.fire({icon: 'info', title: '확인 버튼을 눌러 주세요'}).then((result)=>{
   if(result.isConfirmed){
      alert("확인");
   }
});

같이 확인 버튼 누른 경우에 대한 처리만 추가 해서 confirm을 구현 할 수 있습니다.

그외 다양한 옵션이 있는데 사이트를 보면 아주 친절하게 설명이 되어 있습니다.

 

--페이지 loding 혹은 blockui대체

페이지 로딩 표시 혹은 blockUi를 대체하기 위해서 기본 설정을 아래와 같이 정의 합니다.

var ToastBlockUi = Swal.mixin({
   showConfirmButton: false,
   allowOutsideClick: false,
   padding: '3em',
   background: '#fff',
   backdrop: 'rgba(0, 0, 0, 0.7) left top no-repeat'
});

(

allowOutsideClick=>외부 화면 클릭시 화면 닫는 이벤트 비 활성화 false 설정 합니다.

padding, background, backdrop 디자인 적인 부분이라 화면에 맞춰서 수정 해주면 됩니다. rgba 부분은

http://www.codicut.com/util/index.html 사이트 참고 해서 지정 하시면 됩니다.

)

 

사용하려는 페이지에 아래와 같이 추가 합니다.

ToastBlockUi.fire({imageUrl: '<c:url value="/images/blockbusy.gif" />', imageWidth: 15, imageHeight: 15, title: '잠시만 기다려주세요.'});

로딩 이미지는 blockUi의 이미지 그대로 사용 했는데 필요에 맞춰서 수정 해주시면 됩니다.

block화면이 닫히는 부분은 

ToastBlockUi.close(); 을 이용하시면 됩니다.

테스트 시에는 setTimeout(() => ToastBlockUi.close(), 3000); 을 사용 했습니다.

(

c:url 을 사용하기 위해 fire 부분에 이미지 관련 내용이 들어가 있는데 mixin 부분에 

imageUrl: '../../images/blockbusy.gif', 
imageWidth: 15, 
imageHeight: 15

같이 설정 해도 됩니다.

)