본문 바로가기
JavaScript

[JavaScript] SweetAlert2 라이브러리로 팝업창 만들기

by teamnova 2023. 9. 5.

안녕하세요.

이번 시간에는 SweetAlert2 라이브러리를 사용해서 웹페이지에서 예쁜 팝업창 띄우는 예제를 진행하겠습니다.

 

전체 코드를 먼저 보여드리고 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sweetalert2 Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>
</head>
<body>
    <div>
        <button type="button" onclick="alertSuccess()">SUCCESS</button>
    </div>
    <div>
        <button type="button" onclick="alertWarning()">WARNING</button>
    </div>
    <div>
        <button type="button" onclick="alertError()">ERROR</button>
    </div>
    <div>
        <button type="button" onclick="alertDelete()">DELETE</button>
    </div>
    
   

    <script type="text/javascript">
        function alertSuccess(){
            Swal.fire({
                icon: 'success',
                title: 'Success!!',
                text: 'Good jop!',
                footer: '<a href="">Your Request Succeed!</a>'
            })
        }

        function alertWarning(){
            Swal.fire({
                icon: 'warning',
                title: 'Warning!',
                text: 'warning!',
                footer: '<a href="">this is warning</a>'
            })
        }

        function alertError(){
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Something went wrong!',
                footer: '<a href="">Why do I have this issue?</a>'
            })
        }

        function alertDelete(){
            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'
                    )
                }
            })
        }
    </script>
</body>
</html>

 

1. 파일 불러오기

먼저 HTML 파일에서 SweetAlert2 CSS파일과 JS 파일을 인터넷에서 불러옵니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>

 

2. 버튼 만들고 클릭이벤트 만들기

function alertSuccess(){
    Swal.fire({
        icon: 'success',
        title: 'Success!!',
        text: 'Good jop!',
        footer: '<a href="">Your Request Succeed!</a>'
    })
}

function alertWarning(){
    Swal.fire({
        icon: 'warning',
        title: 'Warning!',
        text: 'warning!',
        footer: '<a href="">this is warning</a>'
    })
}

function alertError(){
    Swal.fire({
        icon: 'error',
        title: 'Error!',
        text: 'Something went wrong!',
        footer: '<a href="">Why do I have this issue?</a>'
    })
}

function alertDelete(){
    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'
            )
        }
    })
}

 

3. 실행 결과

 

SweetAlert2 관련된 더 많은 자료는 아래 링크를 참고해주세요.

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

 
 

 

 

'JavaScript' 카테고리의 다른 글

[javascript] Array.from으로 유사배열을 배열로 변환하기  (0) 2023.09.13
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 실전편  (0) 2023.09.10
[javascript] setTimeout()사용하여 타이핑 효과 주기  (0) 2023.09.01
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 기본편  (0) 2023.08.31
[JavaScript] 폼 요소 이벤트 정리 및 예제  (0) 2023.08.27

관련글

티스토리툴바