20'C 흐림
서울 강남구
SweetAlert2 설치
링크에 들어가서, 빨간 박스 쳐진 부분만 2개의 자바스크립트와 CSS파일을 각각 다운받으시면 됩니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>
SweetAlert2 사용법
https://codepen.io/horly-andelo/pen/qBBbgMP
기본 Alert
Swal.fire({
'Alert가 실행되었습니다.', // Alert 제목
'이곳은 내용이 나타나는 곳입니다.', // Alert 내용
'success', // Alert 타입
});
Confirm
Confirm을 구현할때 각 버튼의 색과 내용을 구성할 수 있고, 결과가 뭐냐에 따라 후처리 이벤트(then)를 이용해 다음 동작을 설정할 수 있습니다.
Swal.fire({
title: '정말로 그렇게 하시겠습니까?',
text: '다시 되돌릴 수 없습니다. 신중하세요.',
icon: 'warning',
showCancelButton: true, // cancel버튼 보이기. 기본은 원래 없음
confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
confirmButtonText: '승인', // confirm 버튼 텍스트 지정
cancelButtonText: '취소', // cancel 버튼 텍스트 지정
reverseButtons: true, // 버튼 순서 거꾸로
}).then(result => {
// 만약 Promise리턴을 받으면,
if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
Swal.fire('승인이 완료되었습니다.', '화끈하시네요~!', 'success');
}
});
HANDLING BUTTONS
초기 모달창에서 어떤 버튼을 눌렀느냐에 따라 key를 다르게 설정 할 수 있습니다.
Swal.fire({
// ...
}).then(result => {
if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
// ...실행
} else if (result.isDismissed) { // 만약 모달창에서 cancel 버튼을 눌렀다면
// ...실행
}
});
Prompt
Prompt는 텍스트를 입력받는 알림창입니다.
보여드리는 예시는 이름을 입력받는 text 예시지만, 이밖에 체크박스, 라디오 버튼, 셀렉트 박스, 파일 등 <input> 태그로 만들 수 있는 모든 것들을 prompt로 구현할 수 있다고 보시면 되겠습니다.
(async () => {
const { value: getName } = await Swal.fire({
title: '당신의 이름을 입력하세요.',
text: '그냥 예시일 뿐입니다.',
input: 'text',
inputPlaceholder: '이름을 입력..'
})
// 이후 처리되는 내용.
if (getName) {
Swal.fire(`: ${getName}`)
}
})()
Toast
const Toast = Swal.mixin({
toast: true,
position: 'center-center',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'toast 알림이 정상적으로 실행 되었습니다.'
})
Image
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200'
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
})
Ajax
Swal.fire({
title: 'Submit your Github username',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Look up',
showLoaderOnConfirm: true, // 데이터 결과를 받을때까지, 버튼에다가 로딩바를 표현
preConfirm: (login) => { // 확인 버튼 누르면 실행되는 콜백함수
return fetch(`//api.github.com/users/${login}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
// 실행되는 동안 배경 누를때 모달창 안닫히도록 설정
// isLoading() 즉, 로딩이 진행되는 동안 false를 리턴하게 해서 ousideClick을 안되게 하고, 로딩 상태가 아니면 ousideClick을 허용한다.
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
})
}
})
아이콘 타입
Swal.fire({
icon: 'success', // 여기다가 아이콘 종류를 쓰면 됩니다.
title: 'Alert가 실행되었습니다.',
text: '이곳은 내용이 나타나는 곳입니다.',
});
페이지이동
Swal.fire({
title: '<strong class="f-s-20r">중요!</strong>',
html: '페이지를 이동하시겠습니까?',
icon: 'error',
confirmButtonColor: '#e53935',
confirmButtonText: '확인'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = 'https://example.com'; // 이동하고자 하는 URL을 여기에 입력합니다.
}
});