[js] 깔끔하고 사용하기 쉬운 알림 sweetalert2.js

sweetalert2.js

---

 

sweetalert2는 웹 개발에서 자주 쓰이는 alert을 시각적으로 표현할 수 있는 js 라이브러리입니다.

기존의 alert은 단순히 텍스트만 전달이 가능하여, 알림, 오류, 성공, 경고 등 상황에 따라서 시각적으로 강조해야할 경우 전달력이 떨어지는 상황이 있습니다.

이 경우 사용할 수 있는 간단하면서도 강력한 라이브러리를 소개합니다.

See the Pen Untitled by SeungJoo Moon (형제TV) (@SeungJoo-Moon-TV) on CodePen.

 

반응형

 

위 소스를 보시면 5가지 icon에 따라 알림, 경고, 실패, 성공, 질문에 대한 메세지를 전달할 수 있습니다. icon을 설정하기 위해선 다음과 같은 파라메터를 사용합니다.

• warning
• error
• success
• info
• question

<script src="sweetalert2.all.min.js"></script>

라이브러리를 사용하기 위해 cdn 방식으로 import 합니다.

 $("#btn-info").click(function () {
    Swal.fire({
      icon: 'info',
      title: '알림의 제목입니다.',
      text: '성공',
    });
 });

다음 소스코드를 사용해서 필요한 때 alert을 호출할 수 있습니다.

위 소스코드를 복사해서 간단하게 사용하시면 됩니다.