부트스트랩 SweetAlert 알림창 활용 및 예제
Bootstrap에서 제공하는 플러그인 중 하나인 SweetAlert를 활용하여
사용자 친화적인 알림창을 만드는 방법에 대해 알아보겠습니다.
SweetAlert란?
SweetAlert은 기본 JavaScript alert 대신 사용할 수 있는 아름답고 사용자 친화적인 팝업 대화상자를 생성하는 라이브러리입니다. 여러 가지 옵션을 설정하여 다양한 스타일과 동작의 알림창을 쉽게 만들 수 있습니다.
SweetAlert 라이브러리 추가하기
먼저, HTML 문서에서 SweetAlert 라이브러리를 추가해야 합니다. 다음과 같은 코드를 <head> 태그 내에 추가합니다:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>위 코드는 인터넷 상의 최신 버전의 SweetAlert 파일을 로드합니다.
기본적인 알림창 생성하기
SweetAlert로 가장 간단한 형태의 알림창을 만드는 방법은 다음과 같습니다:
swal("Hello world!");위 코드를 실행하면 "Hello world!"라는 메시지가 담긴 기본적인 알림창이 생성됩니다.
제목과 텍스트가 있는 알림창 생성하기
다음과 같이 제목(title)과 본문(text)을 설정할 수 있습니다:
swal("Our First Alert", "This is the text of our alert");위 코드를 실행하면 "Our First Alert"라는 제목과 "This is the text of our alert"라는 본문 텍스트가 포함된 팝업 창이 생성됩니다.
아이콘 추가하기
SweetAlert에서는 icon 옵션으로 'warning', 'error', 'success' 및 'info' 네 가지 종류의 아이콘을 지원합니다:
swal({
title: "Success!",
text: "Your operation was completed successfully.",
icon: "success",
});위 코드를 실행하면 성공 메시지와 함께 체크마크 아이콘이 포함된 팝업 창이 생성됩니다.
버튼 추가하기
button 옵션을 사용하여 알림창에 버튼을 추가할 수 있습니다:
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
});위 코드를 실행하면 경고 아이콘과 함께 'OK'와 'Cancel' 두 개의 버튼이 포함된 팝업 창이 생성됩니다.
마무리
SweetAlert는 사용자 친화적인 알림창을 쉽게 만들 수 있게 해주는 훌륭한 라이브러리입니다.
다양한 옵션을 활용하여 다양한 스타일과 동작의 알림창을 만들어보세요!
SweetAlert에 대한 더 많은 예시와 실전 활용 사례들은 공식 문서나 참고 자료들에서 확인하실 수 있으니 궁금한 점이 있다면 찾아보세요!
Happy coding! 😊
'vita_Programing' 카테고리의 다른 글
| Javascript에서 원단위를 절사하는 방법 (0) | 2023.10.28 |
|---|---|
| Javascript로 체크박스의 체크여부를 확인하는 방법 (0) | 2023.10.27 |
| jQuery로 체크박스 제어하기 (0) | 2023.10.25 |
| 자바스크립트 join() 함수로 문자열을 합치는 방법 (0) | 2023.10.24 |
| 자바스크립트에서 + 연산자를 이용하여 문자열 합치기: 예제와 활용 방법 (0) | 2023.10.23 |
