[Jquery] jQuery sweetalert2 alert창 사용하기

1. 개요

• jquery plugin sweetalert2를 사용하여 alert창을 좀더 깔끔하게 만들어 본다.
• https://sweetalert2.github.io/

SweetAlert2

 

 

2.기본디자인

• 아래와 같이 일반적인 alert창과 sweetalert2를 사용했을때의 기본문법을 보여준다.

 

 

3. install 및 cdn

• jquery 기준으로 아래와 같이 사용할수 있다.

//필요한 파일을 참조
<script src="sweetalert2.all.min.js"></script>

//원하는 경우 스타일시트를 별도로 포함
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

 

• reactjs / vuejs 등에서는 아래와 같이 사용한다.

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')

//JS와 CSS를 별도로 가져올수 있다.
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

 

 

4. alert예제

<script>
    Swal.fire({ icon: 'warning', title: 'Warning', text: '아이디를 입력하십시오.' });
    Swal.fire({ icon: 'error', title: 'Error', text: "요청처리를 실패하였습니다." });
    Swal.fire({ icon: 'success', title: "Success", text: '정상적으로 처리하였습니다.' });
</script>

 

 

5. confirm예제

<script>
    Swal.fire({
        title: "Confirm",
        text: '등록하시겠습니까?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085D6',
        cancelButtonColor: '#DD3333',
        confirmButtonText: 'Yes, register it!'
    }).then(function(result) {
        if (result.isConfirmed) {            
            var url = /user/insert";	            
            var ret = ajax 통신......
            if(ret["response"] == "SUCCESS"){
                Swal.fire({
                    title: "Success",
                    text: '정상적으로 등록되었습니다.',
                    icon: 'success',
                }).then(function() {
                    //목록으로 이동
                });
            }
        }
    });  
</script>

 

• confirm 화면

sweetalert2

• confirm 완료화면

sweetalert2