Overview Official Website

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

CSS
<!-- Sweet Alert css-->
<link href="assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
Javascript
<!-- Sweet Alerts js -->
<script src="assets/libs/sweetalert2/sweetalert2.min.js"></script>
Initjs (Custom js)
<!-- Sweet alert init js-->
<script src="assets/js/pages/sweetalerts.init.js"></script>
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: 'assets/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(assets/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: '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.