자바스크립트의 alert 창과는 다르게 디자인이 추가된 형식의 SweetAlert2.
1. 세팅하기
CDN으로 설치하기
SwwetAlert2는 CDN 링크를 지원하고 있어서 아래의 코드를 복사해 html의 <head> 태그 안에 붙여 넣으면 된다.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>2. Swal.fire Alert 사용
기본 Alert 형식을 사용하고 싶은 경우 아래의 코드를 사용한다.
$().ready(function () {
$("#alertStart").click(function () {
Swal.fire({
icon: 'success', // Alert 타입
title: 'Alert가 실행되었습니다.', // Alert 제목
text: '이곳은 내용이 나타나는 곳입니다.', // Alert 내용
});
});
});3. Swal.fire Confirm 사용
Confirm을 구현할 때 각 버튼의 색과 내용을 구성 가능하고, 결과에 따라서 후처리 이벤트를 이ㅛㅇ해 다음 동작을 설정할 수 있다.
$().ready(function () {
$("#confirmStart").click(function () {
Swal.fire({
title: '정말로 그렇게 하시겠습니까?',
text: "다시 되돌릴 수 없습니다. 신중하세요.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '승인',
cancelButtonText: '취소'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'승인이 완료되었습니다.',
'화끈하시네요~!',
'success'
)
}
})
});
});
4. Prompt로 사용하기
Prompt는 텍스트를 입력받는 알림창이다.
밑에 예시는 이름을 입력받는 text 예시지만, 이것 외에도 체크박스, 라디오 버튼, 셀렉트 박스, 파일 등 <input> 태그의 타입들은 모두 prompt로 구현 가능하다.
(async () => {
const { value: getName } = await Swal.fire({
title: '당신의 이름을 입력하세요.',
text: '그냥 예시일 뿐이니 정보유출 같은건 없습니다.',
input: 'text',
inputPlaceholder: '이름을 입력..'
})
// 이후 처리되는 내용.
if (getName) {
Swal.fire(`: ${getName}`)
}
})()
백엔드 서버 엔지니어