Sweetalert2 Official Website

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

CSS
<!-- Sweet Alert css-->
<link href="{% static 'libs/sweetalert2/dist/sweetalert2.min.css'%}" rel="stylesheet" type="text/css" />
Javascript
<!-- Sweet Alerts js -->
<script src="{% static 'libs/sweetalert2/dist/sweetalert2.min.js'%}"></script>
Initjs (Custom js)
<!-- Sweet alert init js-->
<script src="{% static 'js/pages/sweetalerts.init.js'%}"></script>
Examples:
Title Javascript
A Basic Message 
$('#sa-basic').on('click', function () {
    Swal.fire(
        {
            title: 'Any fool can use a computer',
            confirmButtonColor: '#556ee6',
        }
    )
});
A Title with a Text Under 
$('#sa-title').click(function () {
    Swal.fire(
        {
            title: "The Internet?",
            text: 'That thing is still around?',
            icon: 'question',
            confirmButtonColor: '#556ee6'
        }
    )
});
A Success message! 
$('#sa-success').click(function () {
    Swal.fire(
        {
            title: 'Good job!',
            text: 'You clicked the button!',
            icon: 'success',
            showCancelButton: true,
            confirmButtonColor: '#556ee6',
            cancelButtonColor: "#f46a6a"
        }
    )
});
A Warning message, with a function attached to the "Confirm"-button... 
$('#sa-warning').click(function () {
    Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#34c38f",
        cancelButtonColor: "#f46a6a",
        confirmButtonText: "Yes, delete it!"
        }).then(function (result) {
        if (result.value) {
            Swal.fire("Deleted!", "Your file has been deleted.", "success");
        }
    });
});
By passing a parameter, you can execute something else for "Cancel". 
$('#sa-params').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!',
        confirmButtonClass: 'btn btn-success mt-2',
        cancelButtonClass: 'btn btn-danger ms-2 mt-2',
        buttonsStyling: false,
    }).then(function (result) {
        if (result.value) {
            Swal.fire({
                title: 'Deleted!',
                text: 'Your file has been deleted.',
                icon: 'success',
            })
            } else if (
            // Read more about handling dismissals
            result.dismiss === Swal.DismissReason.cancel
            ) {
            Swal.fire({
                title: 'Cancelled',
                text: 'Your imaginary file is safe :)',
                icon: 'error',
            })
            }
    });
});
A message with custom Image Header. 
$('#sa-image').click(function () {
    Swal.fire({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: '/static/images/logo-dark.png',
        imageHeight: 20,
        confirmButtonColor: "#556ee6",
        animation: false
    })
});
A message with auto close timer. 
$('#sa-close').click(function () {
    var timerInterval;
    Swal.fire({
    title: 'Auto close alert!',
    html: 'I will close in  seconds.',
    timer: 2000,
    confirmButtonColor: "#556ee6",
    onBeforeOpen:function () {
        Swal.showLoading()
        timerInterval = setInterval(function() {
        Swal.getContent().querySelector('strong')
            .textContent = Swal.getTimerLeft()
        }, 100)
    },
    onClose: function () {
        clearInterval(timerInterval)
    }
    }).then(function (result) {
    if (
        // Read more about handling dismissals
        result.dismiss === Swal.DismissReason.timer
    ) {
        console.log('I was closed by the timer')
    }
    })
});
Custom HTML description and buttons. 
$('#custom-html-alert').click(function () {
    Swal.fire({
        title: 'HTML example',
        icon: 'info',
        html: 'You can use bold text, ' +
        'links ' +
        'and other HTML tags',
        showCloseButton: true,
        showCancelButton: true,
        confirmButtonClass: 'btn btn-success',
        cancelButtonClass: 'btn btn-danger ms-1',
        confirmButtonColor: "#47bd9a",
        cancelButtonColor: "#f46a6a",
        confirmButtonText: ' Great!',
        cancelButtonText: ''
    })
});
A custom positioned dialog 
$('#sa-position').click(function () {
    Swal.fire({
        position: 'top-end',
        icon: 'success',
        title: 'Your work has been saved',
        showConfirmButton: false,
        timer: 1500
    })
});
A message with custom width, padding and background. 
$('#custom-padding-width-alert').click(function () {
    Swal.fire({
        title: 'Custom width, padding, background.',
        width: 600,
        padding: 100,
        confirmButtonColor: "#556ee6",
        background: '#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)'
    })
});
Ajax request example. 
$('#ajax-alert').click(function () {
    Swal.fire({
        title: 'Submit email to run ajax request',
        input: 'email',
        showCancelButton: true,
        confirmButtonText: 'Submit',
        showLoaderOnConfirm: true,
        confirmButtonColor: "#556ee6",
        cancelButtonColor: "#f46a6a",
        preConfirm: function (email) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    if (email === 'taken@example.com') {
                        reject('This email is already taken.')
                    } else {
                        resolve()
                    }
                }, 2000)
            })
        },
        allowOutsideClick: false
    }).then(function (email) {
        Swal.fire({
            icon: 'success',
            title: 'Ajax request finished!',
            html: 'Submitted email: ' + email,
            confirmButtonColor: "#556ee6",
        })
    })
});
Custom Sweetalert Example:
Title Javascript
Success Message 
document.getElementById("custom-sa-success").addEventListener("click", function() {
Swal.fire({
html: '
' +
'' +
'
' +
'
Well done !
' +
'
Aww yeah, you successfully read this important message.
' +
'
' +
'
',
showCancelButton: true,
showConfirmButton: false,
cancelButtonClass: 'btn btn-primary w-xs mb-1',
cancelButtonText: 'Back',
buttonsStyling: false,
showCloseButton: true
})
});
Error Message 
document.getElementById("custom-sa-error").addEventListener("click", function() {
Swal.fire({
html: '
' +
'' +
'
' +
'
Oops...! Something went Wrong !
' +
'
Your email Address is invalid
' +
'
' +
'
',
showCancelButton: true,
showConfirmButton: false,
cancelButtonClass: 'btn btn-primary w-xs mb-1',
cancelButtonText: 'Dismiss',
buttonsStyling: false,
showCloseButton: true
})
});
Warning Message 
document.getElementById("custom-sa-warning").addEventListener("click", function() {
Swal.fire({
html: '
' +
'' +
'
' +
'
Are you Sure ?
' +
'
Are you Sure You want to Delete this Account ?
' +
'
' +
'
',
showCancelButton: true,
confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
confirmButtonText: 'Yes, Delete It!',
cancelButtonClass: 'btn btn-danger w-xs mb-1',
buttonsStyling: false,
showCloseButton: true
})
});
Join Our Community 
document.getElementById("custom-sa-community").addEventListener("click", function() {
Swal.fire({
title: 'Join Our Community',
html: 'You can use bold text, ' +
'links ' +
'and other HTML tags',
html: '
' +
'' +
'' +
'
',
imageUrl: 'assets/images/logo-sm.png',
footer: '
Already have an account ?  Signin  
',
imageHeight: 40,
confirmButtonClass: 'btn btn-primary w-xs mb-2',
confirmButtonText: 'Register ',
buttonsStyling: false,
showCloseButton: true
})
});
Email Verification 
document.getElementById("custom-sa-email-verify").addEventListener("click", function() {
Swal.fire({
html: '
' +
'
' +
'
' +
    '' +
'
' +
'
' +
'
' +
'
Verify Your Email
' +
'
We have sent you verification email example@abc.com, 
 Please check it.
' +
'
' +
'
',
showCancelButton: false,
confirmButtonClass: 'btn btn-primary mb-1',
confirmButtonText: 'Verify Email',
buttonsStyling: false,
footer: '
Didn\'t receive an email ? Resend
',
showCloseButton: true
})
});
Notification Message 
document.getElementById("custom-sa-notification").addEventListener("click", function() {
Swal.fire({
html: '
' +
'
' +
'thumbnail' +
'
' +
'
' +
'
Welcome Mike Mayer
' +
'
You have 2 Notifications
' +
'
' +
'
',
showCancelButton: false,
confirmButtonClass: 'btn btn-primary mb-1',
confirmButtonText: 'Show Me ',
buttonsStyling: false,
showCloseButton: true
})
});
© Skote.