Sweetalert2

  1. Advance UI
  2. Sweetalert2
Overview 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>
Add Package
yarn add sweetalert2 --save
Remove Package
yarn remove sweetalert2 or you can remove package by removing specific package from package.json .
Examples
Title Javascript
A Basic Message 
document.getElementById("sa-basic").addEventListener("click", function() {
    Swal.fire(
            {
                title: 'Any fool can use a computer',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false,
                showCloseButton: true
            }
    )
});
A Title with a Text Under 
document.getElementById("sa-title").addEventListener("click", function() {
    Swal.fire(
            {
                title: "The Internet?",
                text: 'That thing is still around?',
                icon: 'question',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false,
                showCloseButton: true
            }
    )
});
A Success message! 
document.getElementById("sa-success").addEventListener("click", function() {
    Swal.fire(
            {
                title: 'Good job!',
                text: 'You clicked the button!',
                icon: 'success',
                showCancelButton: true,
                confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
                cancelButtonClass: 'btn btn-danger w-xs mt-2',
                buttonsStyling: false,
                showCloseButton: true
            }
    )
});
A Modal with a title, an error icon, a text, and a footer 
document.getElementById("sa-error").addEventListener("click", function() {
    Swal.fire(
            {
                title: 'Oops...',
                text: 'Something went wrong!',
                icon: 'error',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false,
                footer: 'Why do I have this issue?',
                showCloseButton: true
            }
    )
});
A Modal window with a long content inside 
document.getElementById("sa-longcontent").addEventListener("click", function() {
    Swal.fire(
        {
            imageUrl: 'https://placeholder.pics/svg/300x1500',
            imageHeight: 1500,
            imageAlt: 'A tall image',
            confirmButtonClass: 'btn btn-primary w-xs mt-2',
            buttonsStyling: false,
            showCloseButton: true
        }
    )
});
A Warning message, with a function attached to the "Confirm"-button... 
document.getElementById("sa-warning").addEventListener("click", function() {
    Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
        cancelButtonClass: 'btn btn-danger w-xs mt-2',
        confirmButtonText: "Yes, delete it!",
        buttonsStyling: false,
        showCloseButton: true
      }).then(function (result) {
        if (result.value) {
            Swal.fire({
                title: 'Deleted!',
                text: 'Your file has been deleted.',
                icon: 'success',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false
            })
        }
    });
});
By passing a parameter, you can execute something else for "Cancel". 
document.getElementById("sa-params").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!',
        confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
        cancelButtonClass: 'btn btn-danger w-xs mt-2',
        buttonsStyling: false,
        showCloseButton: true
    }).then(function (result) {
        if (result.value) {
            Swal.fire({
                title: 'Deleted!',
                text: 'Your file has been deleted.',
                icon: 'success',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false
            })
          } else if (
            // Read more about handling dismissals
            result.dismiss === Swal.DismissReason.cancel
          ) {
            Swal.fire({
              title: 'Cancelled',
              text: 'Your imaginary file is safe :)',
              icon: 'error',
              confirmButtonClass: 'btn btn-primary mt-2',
              buttonsStyling: false
            })
          }
    });
});
A message with custom Image Header. 
document.getElementById("sa-image").addEventListener("click", function() {
    Swal.fire({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: '/static/images/logo-sm.png',
        imageHeight: 40,
        confirmButtonClass: 'btn btn-primary w-xs mt-2',
        buttonsStyling: false,
        animation: false,
        showCloseButton: true
    })
});
A message with auto close timer. 
document.getElementById("sa-close").addEventListener("click", function() {
    var timerInterval;
    Swal.fire({
        title: 'Auto close alert!',
        html: 'I will close in  seconds.',
        timer: 2000,
        timerProgressBar: true,
        showCloseButton: true,
        didOpen:function () {
            Swal.showLoading()
            timerInterval = setInterval(function() {
            var content = Swal.getHtmlContainer()
            if (content) {
                var b = content.querySelector('b')
                if (b) {
                    b.textContent = Swal.getTimerLeft()
                }
            }
            }, 100)
        },
        onClose: function () {
            clearInterval(timerInterval)
        }
        }).then(function (result) {
            /* Read more about handling dismissals below */
            if (result.dismiss === Swal.DismissReason.timer) {
                console.log('I was closed by the timer')
            }
        })
});
Custom HTML description and buttons. 
document.getElementById("custom-html-alert").addEventListener("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 me-2',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false,
            confirmButtonText: ' Great!',
            cancelButtonText: '',
            showCloseButton: true
    })
});
A dialog with three buttons. 
document.getElementById("sa-dialog-three-btn").addEventListener("click", function() {
    Swal.fire({
            title: 'Do you want to save the changes?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            confirmButtonClass: 'btn btn-success w-xs me-2',
            cancelButtonClass: 'btn btn-danger w-xs',
            denyButtonClass: 'btn btn-info w-xs me-2',
            buttonsStyling: false,
            denyButtonText: 'Don\'t save',
            showCloseButton: true
        }).then(function (result) {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
            Swal.fire({
                title: 'Saved!',
                icon: 'success',
                confirmButtonClass: 'btn btn-primary w-xs',
                buttonsStyling: false,
            })
            } else if (result.isDenied) {
            Swal.fire({
                title: 'Changes are not saved',
                icon: 'info',
                confirmButtonClass: 'btn btn-primary w-xs',
                buttonsStyling: false,
            })
        }
      })
});
A custom positioned dialog. 
document.getElementById("sa-position").addEventListener("click", function() {
    Swal.fire({
        position: 'top-end',
        icon: 'success',
        title: 'Your work has been saved',
        showConfirmButton: false,
        timer: 1500,
        showCloseButton: true
    })
});
A message with custom width, padding and background. 
document.getElementById("custom-padding-width-alert").addEventListener("click", function() {
    Swal.fire({
        title: 'Custom width, padding, background.',
        width: 600,
        padding: 100,
        confirmButtonClass: 'btn btn-primary w-xs',
        buttonsStyling: false,
        background: '#fff url(/static/images/auth-bg.jpg)'
    })
});
Ajax request example. 
document.getElementById("ajax-alert").addEventListener("click", function() {
    Swal.fire({
        title: 'Submit email to run ajax request',
        input: 'email',
        showCancelButton: true,
        confirmButtonText: 'Submit',
        showLoaderOnConfirm: true,
        confirmButtonClass: 'btn btn-primary w-xs me-2',
        cancelButtonClass: 'btn btn-danger w-xs',
        buttonsStyling: false,
        showCloseButton: true,
        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!',
            confirmButtonClass: 'btn btn-primary w-xs',
            buttonsStyling: false,
            html: 'Submitted email: ' + email
        })
    })
});
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: '/static/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
    })
});
© Vixon.
Design & Develop by Themesbrand