Get started with sweetalert2 CDN

MIT licensed

SweetAlert2: library for customizable, visually appealing alerts and modals.

Tags:
  • sweetalert
  • sweetalert2
  • alert
  • modal
  • popup
  • prompt
  • confirm
  • toast
  • accessible

Stable version

Copied!

How to start using sweetalert2 CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with sweetalert2 CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.6/dist/sweetalert2.min.css">
</head>
<body>
    <button id="alert-button">Show Alert</button>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.6/dist/sweetalert2.min.js"></script>
    <script>
        document.getElementById('alert-button').addEventListener('click', function() {
            Swal.fire({
                title: 'Are you sure?',
                text: 'You won\'t be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire('Deleted!', 'Your file has been deleted.', 'success')
                }
            })
        })
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions