[javascript] Toastr를 사용하여 알림 메시지 닫기 버튼 추가하기
Toastr는 사용자에게 알림 메시지를 표시하는 라이브러리입니다. 이 블로그 포스트에서는 Toastr를 사용하여 알림 메시지에 닫기 버튼을 추가하는 방법을 알아보겠습니다.
1. Toastr 설치하기
먼저, Toastr를 설치해야 합니다. 이를 위해 CDN을 이용하거나 npm을 통해 설치할 수 있습니다.
CDN을 이용하는 경우
다음 코드를 HTML 파일의 <head> 섹션에 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
npm을 이용하는 경우
명령 프롬프트에서 다음 명령어를 실행합니다.
npm install toastr
2. 알림 메시지에 닫기 버튼 추가하기
Toastr를 사용하여 알림 메시지에 닫기 버튼을 추가하려면 아래 코드를 참조하세요.
toastr.options.closeButton = true;
toastr.info('이것은 알림 메시지입니다.', '제목');
toastr.options.closeButton를 true로 설정하면 알림 메시지에 닫기 버튼이 표시됩니다.
마치며
이제 Toastr를 사용하여 알림 메시지에 닫기 버튼을 추가하는 방법을 알게 되었습니다. 단 몇 줄의 코드로 사용자 친화적인 알림 메시지를 만들 수 있습니다.
더 많은 옵션 및 사용법은 Toastr 공식 문서를 참고하시기 바랍니다.
참고 문서: Toastr 공식 문서: https://github.com/CodeSeven/toastr