SweetAlert는 매우 유용한 JavaScript 라이브러리로, 사용자에게 예쁘고 사용하기 쉬운 알림 창을 제공합니다. 이 글에서는 SweetAlert를 사용하여 모달 창과 연동하는 방법을 알아보겠습니다.
SweetAlert 설치
SweetAlert를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야합니다. HTML 파일에 아래의 코드를 추가하여 SweetAlert를 가져올 수 있습니다.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
모달 창 생성
SweetAlert를 사용하여 모달 창을 생성하려면 swal 함수를 호출해야합니다. 아래의 코드는 단순한 알림 창을 생성하는 예제입니다.
swal("Hello!", "SweetAlert 모달 창입니다.", "info");
위의 코드에서는 첫 번째 인자로 표시될 메시지, 두 번째 인자로 보조 메시지, 세 번째 인자로는 알림 창의 스타일을 지정합니다. 위 예제에서 info 스타일을 사용하였습니다.
모달 창 옵션 설정
SweetAlert를 사용하여 모달 창을 생성할 때, 다양한 옵션을 설정할 수 있습니다. 아래는 주요한 옵션들입니다.
title: 모달 창의 제목text: 모달 창에 표시되는 텍스트icon: 모달 창에 표시되는 아이콘 종류buttons: 모달 창 하단에 표시되는 버튼들
아래의 코드는 옵션을 사용하여 모달 창을 생성하는 예제입니다.
swal({
title: "Confirm",
text: "정말로 삭제하시겠습니까?",
icon: "warning",
buttons: {
cancel: "취소",
confirm: "확인",
},
});
버튼 클릭 이벤트 처리
SweetAlert를 사용하여 생성한 모달 창의 버튼 클릭 이벤트를 처리하기 위해서는 then 메소드를 사용해야합니다. 아래의 코드는 확인 버튼을 클릭했을 때 삭제 요청을 보내는 예제입니다.
swal({
title: "Confirm",
text: "정말로 삭제하시겠습니까?",
icon: "warning",
buttons: {
cancel: "취소",
confirm: "확인",
},
}).then((confirm) => {
if (confirm) {
// 삭제 요청 보내기
}
});
위의 예제에서 then 메소드의 콜백 함수에서 confirm 파라미터는 사용자가 확인 버튼을 클릭한 경우 true를, 취소 버튼을 클릭한 경우 false를 받습니다.
SweetAlert를 통해 모달 창과 연동하는 방법에 대해 알아보았습니다. 이를 활용하여 사용자에게 직관적이고 시각적으로 예쁜 알림 창을 제공할 수 있을 것입니다.