SweetAlert2 이용하여 HTML alert 창 꾸미기
2022. 2. 19. 15:11ㆍ코딩/Java Script
반응형
안녕하세요 코봉이입니다.
javascript 를 사용하여 alert 창을 띄우면 기본 style이 아래와 같이 심심한 모양이죠.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert("hello")
</script>
</body>
</html>
하지만, SweetAlert2.js를 연결하여 이용하면 더욱 더 예쁜 alert 창을 만날 수 있습니다.
아래 코드를 이용하면 위 캡쳐 사진처럼 Style이 더 예쁜 alert 창을 만나볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<script>
Swal.fire(
'alert 창 테스트!',
'이 style 마음에 드시나요?',
'warning'
)
</script>
</body>
</html>
추가 사용 방법에 대한 설명이나 예제는 아래 SweetAlert2 공식 홈페이지를 참고하시기 바랍니다.
반응형
'코딩 > Java Script' 카테고리의 다른 글
| JavaScript Array 배열 중복 제거 Set 구하는 방법 (0) | 2022.04.09 |
|---|---|
| JavaScript를 이용하여 Json File을 HTML에 삽입하는 방법 (0) | 2022.04.04 |
| bootstrap selectpicker dropdown below 처리 (0) | 2022.01.28 |
| jQuery id 표기방법 (0) | 2022.01.28 |
| BootstrapTable 에 버튼으로 구성된 열 추가 (linkFormatter) (0) | 2021.06.03 |