[SweetAlert] 예쁜 alert 창 / 사용방법 + 다운로드 주소 ( + 버튼 색상/순서 변경)

기본 알람 창을 사용하게 되면 이쁘지 않고 오래된 사이트로 보인다.

 

그래서 sweetalert 창을 추천하려고 합니다.

 

제가 추천하는 sweetalert 사이트는 https://sweetalert2.github.io/ 입니다.

SweetAlert2

사용방법은 총 2가지입니다.

 

첫번째 사용방법으로는 아래의 코드를 추가합니다.

 

 

두번째 사용방법으로는 다운받아서 폴더안에 저장합니다.

 

1. jsdeliver CDN 클릭

2. 우측 상단 Download 클릭

 

3. 리눅스에서 압축해제(방법 : tar -xvzf [파일명])

 tar -xvzf sweetalert2-9.14.0.tgz

sweetalert2-9.14.0.tgz

0.14MB

package.zip

0.16MB

(package.zip - 압축 해제 후 파일)

<link rel="stylesheet" href="/static/css/sweetAlert/dist/sweetalert2.min.css" />
<script src="/static/vendor/sweetAlert/dist/sweetalert.min.js"></script>

---

사용법 (상단 주소에서 확인)

Swal.fire({
	title: '쿠폰을 등록하시겠습니까?',
	icon: 'question',
	showCancelButton: true,
	confirmButtonColor: '#3085d6',	//버튼 색상 변경
	confirmButtonText: "확인",
	cancelButtonColor: '#d33',		//버튼 색상 변경
	cancelButtonText: "취소",
	reverseButtons: true			//버튼 순서 변경
})