[Modal Popup] SweetAlert 사용하기

웹 페이지에서 Alert, Confirm과 같이 경고창을 띄워야 할 상황이 왕왕 있다.

Javascript에서 기본으로 제공하는 alert이나 confirm을 사용해도 무방하지만

modal 창을 이용해 조금 더 세련된 웹 페이지를 만들 수 있다.

다양한 modal ui 가있지만 그중에서도 SweetAlert에 대해 얘기하려고 한다.

 

구글에  SweetAlert이라고 검색하면 홈페이지에 들어갈 수 있다.

SweatAlert 홈페이지 메인

기존의 alert과 sweetAlert를 이용한 경고창을 비교해볼 수 있고, 아래의 Get started 버튼이나 상단의 Guides메뉴를 클릭해 사용법에 대해 알아볼 수 있다.

 

SweetAlert Import

먼저 어떠한 라이브러리를 사용하려면 라이브러리 파일을 import 해줘야 한다.

jquery를 사용할 때 jquery-1.12.4.min.js 와 같은 파일을 script태그 안에 넣어주는 것처럼..

위의 사진처럼 SweetAlert 서버의 경로를 적어도 되지만 저 경로를 그대로 복사해서

자신의 브라우저 URL창에 붙여 넣기 하면 SweetAlert.min.js 파일을 볼 수 있다.

암때나 클릭해서 컨트롤a컨트롤c

이렇게 js파일을 보고 컨트롤a -> 컨트롤c -> 자신의 프로젝트에 Js디렉터리에 SwwtAlert.min.js 파일을 만들고 컨트롤v -> 자신의 main.jsp 또는 index.jsp 에다가<script type="text/javascript" src="/home/script/sweetAlert.min.js"/>  이런 식으로 추가해주는 것이 효율적이라 생각한다.

sweetalert.min.js

 

그러면 이제 swal이라는 전역 변수를 사용하여 sweetAlert를 사용할 준비가 된 것이다.

 

기본 Alert

Alert 이후의 동작 정의

 

가장 유용하고 기본적으로 사용할 수 있는 것들이  위와 같은 옵션을 이용해서 alert창을 쓰는 것이다. 

• title : modal창 가운데 크고 굵은 글씨로 가운데 출력될 문자열
• text : modal창 내에서 title 문자열 아래에 작은 글씨로 출력될 문자열
• icon : modal창이 성공적인 팝업창인지 경고창인지 등 modal창에 띄울 아이콘 종류.
  - 종류 : "success" , "error", "warning", "info"
• button : modal창의 확인 버튼에 들어갈 값
• closeOnClickOutside : modal창의 바깥쪽을 클릭했을 때 닫히는 여부
  (true : 닫힘 , false : 안 닫힘)

이외에도 상단의 Docs메뉴를 클릭하면 다양한 option의 내용과 커스텀 마이징 할 수 있는 방법들에 대해서 소개되어있다.

 

두 번째 에서 .then키워드를 쓰고 있는데 이것은 확인 버튼을 클릭하고 나서 이후의 동작을 정의할 수 있다. 하지만 => 이 화살표 연산자가 익스플로러에서 작동이 되지 않는다.

따라서 익스플로러와 크롬 둘 다 호환되게 하려면

이렇게 사용해주면 된다. //code 부분에 상황에 맞는 동작을 정의할 수 있다

.then(function(){
//code
        });