기본적으로 브라우저에서 사용하는 알림(모달)창 alert()를 조금 예쁜 알림(모달)창으로 변경하는 방법에 대해서 알아보겠습니다. SweetAlert2입니다. 먼저 세팅하는 방법과 어떻게 사용하면 되는지 샘플로 확인해 보겠습니다. 생각보다 간단하게 설치가 가능하고, 여러 가지 기능들이 있어서 자주 사용하고 있습니다.
SweetAlert2 설치하기
SweetAlert2 웹사이트에서 'Download & install' 영역으로 이동합니다. 제가 주로 사용하는 방법은 CDN을 이용하고 있습니다. 아래 소스를 복사해서 <head></head> 사이에 붙여 넣기만 하시면 세팅 완료입니다.
다른 방법으로는 jsDelivr CDN 웹사이트에서 js파일과 css파일을 제공하기도 합니다.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
SweetAlert2 기본 모달창 사용해 보기
브라우저에서 제공하는 기본 알림(모달)창과 SweetAlert2의 알림(모달)창을 한번 비교해 보시면, 확실히 SweetAlert2의 알림(모달)창이 더 깔끔하고 예쁩니다. SweetAlert2의 기본 알림(모달)창 샘플 소스를 알려드릴게요.
해당 샘플 소스를 <script></script>에 추가 하시면 됩니다.
Swal.fire("SweetAlert2 is working!");
예시 이미지
아이콘, 타이틀, 설명 모달창
알림(모달)창에 아이콘( success, error, warning, info, question ) 총 5가지 사용이 가능합니다. 타이틀 및 설명을 넣은 샘플 소스를 사용해 보겠습니다.
Swal.fire({
title: "The Internet?",
text: "That thing is still around?",
icon: "question"
});
소스설명
- title : 알림(모달)창 제목
- text : 알림(모달)창 설명문구
- icon : 알림(모달)창 아이콘 설정(5가지)
예시이미지
모달창 다른 곳 클릭 시 창 안 닫히게 하는 옵션
SweetAlert2의 알림(모달)창으로 경우 영역 외 클릭 시 알림(모달)창이 닫히는 게 기본 설정입니다. 영역 외 클릭 시 안 닫히는 방법도 한번 알아보겠습니다. 제가 사용해 보니 필요한 부분이었습니다.
Swal.fire({
title: "The Internet?",
text: "That thing is still around?",
icon: "question",
allowOutsideClick: false
});
소스설명
기본 사용소스에 allowOutsideClick를 false로 설정해 주시면 됩니다. 기본 설정은 true로 닫힘을 허용한다는 뜻입니다. 반대로 false로 설정을 하면 닫힘을 허용하지 않는다 합니다. 아주 유용하게 사용할 수 있습니다.
마무리
깔끔하고, 예쁜 알림(모달)창을 사용하는 방법에 대해서 알아봤습니다. 생각보다 편하게 사용이 간단하고, 여러 가지 샘플들이 있어 아주 잘 사용하고 있습니다. 여러분들도 한번 사용해 보세요 ^^
'웹이야기' 카테고리의 다른 글
| PHP 기존 프로젝트에 리액트(React) 빠르게 적용하기 (0) | 2024.11.28 |
|---|---|
| PHP + 리액트(React) 개발 시 좋은 점 (0) | 2024.11.21 |
| 리액트(React) 개발 장점 및 웹 사이트 유형 (0) | 2024.11.20 |
| 리액트(React) 동적 웹 서비스 개발 (0) | 2024.11.19 |
| MySQL 문자열 검색 FULLTEXT INDEX 사용법 (0) | 2024.11.11 |
