sweetalert2 로 예쁜 모달창 띄우기

https://sweetalert2.github.io/#examples

SweetAlert2

 

 

매번 흔히 사용하는 못생긴 alert 창 말고 sweetalert을 이용하여 모달창을 띄워볼 것이다!

 

 

설치부터!

npm install sweetalert2

 

 

import 불러오기

import Swal from 'sweetalert2'

 

 

examples 카테고리에 많은 샘플들이 있는데

난 굳이 커스텀 필요가 없어 코드를 그대로 가져왔다

근데 문제점이 생겼다

 

 

이렇게 떠야지 정상적인데

 

 

 

아이콘 위치가 이상해졌다

원인은 reset.css에 모든 요소의 margin을 0으로 해놨었기 때문이다

 

 

 

 

해결방법은 팝업과 아이콘을 크기를 조정하는 것으로 해결했다

 

div.swal2-icon { margin: 0 auto; } .swal2-popup { padding: 1.25em 0 1.25em }

 

 

 

보기 좋게 모달창을 띄울 수 있었다!

 

 

 

---