프로그래밍/html
[spring]alert 이쁘게 꾸미기!!간단한 Sweetalert 사용 방법
***bmo***
2023. 4. 29. 14:53
반응형
https://sweetalert2.github.io/
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
못생긴 기본 alert를 꾸며보자...
사용법 짱짱쉬움
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
css랑 js 추가해주고
alert 자리에
swal("타이틀","설명", {icon: "사용할 아이콘 종류"});
이렇게 적어주면 된다
대표적으로 쓰는 아이콘종류는 success, warning,error, info이다.
아이콘 대신 사진을 넣을수도 있다. 깃허브 참고하쉐요
swal에서 함수를 연결하고 싶다면
swal({
title : "타이틀",
icon : "아이콘 종류",
closeOnClickOutside : false
}).then(function(){
// 함수
});
이렇게 쓰면 된다
<success>
swal({
title : "리뷰가 삭제되었습니다",
icon : "success",
closeOnClickOutside : false
}).then(function(){
location.reload();
});
<warning>
swal("입력된 내용이 없습니다","", {icon: "warning"});
반응형