반응형
모지Lee 입니다.
이건 제가 만든 웹페이지 입니다.
https://playzapangi.netlify.app/
Play 자판기
심심풀이 테스트가 한 곳에!! 별도의 회원가입 필요없이 그냥 즐기면 OK
playzapangi.netlify.app
웹 코딩을 하다 보면 alert 창을 가끔 쓰게 되는데
기본적으로 제공해 주는 것 말고 커스터마이징 해서 쓰고 싶은 마음이 들었어요.
그래서 혹시 관련 라이브러리가 있나 폭풍 검색해봤는데
적절한 게 딱 있네요.
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
SweetAlert2라는 라이브러리인데요.
비교적 간단한 설치로 Alert 창을 쉽게 커스터마이징 해주는 라이브러리입니다.
alert('Hello!!');
기본적인 Alert 창 형태입니다.
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
)
sweetAlert2 사용한 모습니다.
설치하는 방법은 홈페이지에 들어가 보시면 좌측 Installation 항목에 잘 나와있습니다.
저는 웹에서 사용할 것이기 때문에 <head>에 아래처럼 추가해주었습니다.
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="style.css">
<!-- sweetalert2 -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>워낙 홈페이지에 사용법이나 메서드 같은 것들도 정리가 잘 되어 있어서 사용하기 편하네요.
그냥 끝내기 아쉬우니 예시 몇 가지만 쓰고 가겠습니다.
그럼 뿅~~~~
반응형
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
})
const { value: email } = await Swal.fire({
title: 'Input email address',
input: 'email',
inputLabel: 'Your email address',
inputPlaceholder: 'Enter your email address'
})
if (email) {
Swal.fire(`Entered email: ${email}`)
}
반응형
'웹' 카테고리의 다른 글
| 카카오 애드핏 kakao Adfit 웹페이지에 광고 넣기 Web HTML JavaScript (2) | 2021.04.01 |
|---|---|
| MARQUEE 태그를 이용하여 웹페이지에 간단하게 움직이는 텍스트를 만들어보자! Web HTML JavaScript (0) | 2021.03.29 |
| 간단한 OX 퀴즈 웹페이지 만들기 - 세엣 Web HTML JavaScript (12) | 2021.03.15 |
| 간단한 OX 퀴즈 웹페이지 만들기 - 두울 Web HTML JavaScript (0) | 2021.03.05 |
| 간단한 OX 퀴즈 웹페이지 만들기 - 하나 Web HTML JavaScript (0) | 2021.02.28 |
댓글