[javascript] alert library 유용한 alert 창 라이브러리 alert창에 url제거 [펌]

[javascript] alert library 유용한 alert 창 라이브러리 alert창에 url제거 [펌]

 

javascript alert library 유용한 alert 창 라이브러리 alert창에 url제거

 

 

브라우져마다 제공하는 alert창의 UI는 다르죠.

 

IE의 경우

 

 

크롬의 경우..

url 까지 뜨고.. 보기싫죠..

 

 

 

결론적으로 말하면

우리가 자주 사용하는 브라우져의 alert창은 이쁘지 않습니다.

 

열씨미 googling을 해보면 많은 alert 라이브러리들이 존재하지만

그중에 좀 이쁘장한 걸 추천해 드릴려 합니다.

 

그 이름도 달콤한 SweetAlert

 

 

아래와 같이 훨~씬 이쁘장한 alert창을 간단하게 띄울 수 있습니다.

 

 

 

 

 

다운로드와 적용방법은 아래의 Link를 참고하세요~!

 

 

 

Link : http://t4t5.github.io/sweetalert/

 

 

링크를 들어가면 자기들이 얼마나 이쁜지 도발부터 시작하죠..

 

 

show error message를 클릭해보시면 차이를 아실 수 있습니다.

 

아래는 몇가지 example 들이 나오고

원하는 걸 사용하시면 됩니다.

 

--적용방법

 

페이지 아래로 쭉~~~~내려가다 보면 다운로드가 있습니다.

파일을 다운로드 받아 압축을 풀고 아래의 경로로 갑니다.

 

sweetalert-master\dist

 

해당 경로에서 sweetalert.min.js 파일과 sweetalert.css 파일을 복사해서

프로젝트의 원하는 위치에 복사합니다.

 

그리고 헤더나 쓰고자하는 jsp 에 아래 두줄을 추가해주세요.

 

<link rel="stylesheet" type="text/css" href="${ctx }/css/sweetalert.css" />

<script type="text/javascript" src="<c:url value='/js/sweetalert.min.js'/>"></script>

 

(경로는 각자 맞게 설정해주세요..)

 

그리고 나서 위의 예시처럼 경고창이 들어갈 부분에

 

swal("","데이터를 가져오는데 실패하였습니다.", "error");

swal("","데이터를 가져오는데 성공하였습니다..", "success");

 

로 바꿔주시면 끝!

 

UI 적으로 수정해야 될 부분이 있다면 sweetalert.css 를 수정해주시면 됩니다.!

출처: https://aljjabaegi.tistory.com/217 [알짜배기 프로그래머]