SweetAlert
예쁜걸 좋아하는 개발자들이 만들었다
RINK :https://sweetalert2.github.io
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
참고한 블로그 : https://hyun222.tistory.com/282?category=515159
실행화면 예시
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>ERROR SWEET BREAKER</title>
</head>
<script>
function SweetAlert(){
Swal.fire('Why?')
}
function OriginAlert(){
alert('Do you call me?')
}
function imgAlert(){
Swal.fire({
title: '도토리',
text: '우리 강아지가 최고다.',
imageWidth: 400,
imageHeight: 400,
imageAlt: 'Custom image',
})
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<body>
<b>LET'S STUDY SweetAlert :)!</b>
<br>
<br>
<table>
<tr>
<td>SweetAlert</td>
<td>예쁜걸 좋아하는 개발자들이 만들었다</td>
</tr>
<tr>
<td>RINK : </td>
</tr>
<tr>
<td>I really like this! </td>
<td>So Charming</td>
</tr>
<tr>
<td>Like Sweet desert</td>
<td>My browniepoint </td>
</tr>
<tr>
<td>참고한 블로그 </td>
</tr>
</table>
<br>
<button onclick = "SweetAlert()"> SweetAlert </button> <button onclick = "OriginAlert()"> Original Alert </button> <button onclick = "imgAlert()"> Image Alert </button>
<br>
<br>
<div>
Button을 클릭할 때 <br>
javascript에 작성한 함수를 실행한다.<br>
Swal은 Sweet Alert의 줄임말로 <br>
홈페이지의 Swal을 javascript 부분에 붙혀놓아야 동작한다.
</div>
</body>
</html>