SweetAlert2
A beautiful, responsive, customizable, accessible (wai-aria) replacement for javascript's popup boxes.
For more info please visit the plugin's Demo Pageor Github Repo.
For more info please visit the plugin's Demo Pageor Github Repo.
Base Examples
Basic alert.
$("#kt_sweetalert_demo_1").click(function(e) {
Swal.fire("Good job!");
});
Alert title and text.
$("#kt_sweetalert_demo_2").click(function(e) {
Swal.fire("Here's the title!", "...and here's the text!");
});
State Icons
Enable
warning,
error,
success,
infoand
questionstate icons
$("#kt_sweetalert_demo_3_1").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "warning");
});
$("#kt_sweetalert_demo_3_2").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "error");
});
$("#kt_sweetalert_demo_3_3").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "success");
});
$("#kt_sweetalert_demo_3_4").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "info");
});
$("#kt_sweetalert_demo_3_5").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "question");
});
Customization Examples
Change confirm button text and class.
$("#kt_sweetalert_demo_4").click(function (e) {
Swal.fire({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Confirm me!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
Custom button with icon.
$("#kt_sweetalert_demo_5").click(function (e) {
Swal.fire({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "<i class='la la-headphones'></i> I am game!",
showCancelButton: true,
cancelButtonText: "<i class='la la-thumbs-down'></i> No, thanks",
customClass: {
confirmButton: "btn btn-danger",
cancelButton: "btn btn-default"
}
});
});
A custom positioned dialog with timer to auto close.
$("#kt_sweetalert_demo_6").click(function(e) {
Swal.fire({
position: "top-right",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500
});
});
Customization Examples
jQuery HTML with custom animate.cssanimation.
$('#kt_sweetalert_demo_7').click(function (e) {
Swal.fire({
title: 'jQuery HTML example',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
});
});
A warning message, with a function attached to the confirm button.
$("#kt_sweetalert_demo_8").click(function(e) {
Swal.fire({
title: "Are you sure?",
text: "You won"t be able to revert this!",
icon: "warning",
showCancelButton: true,
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.
$("#kt_sweetalert_demo_9").click(function(e) {
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(function(result) {
if (result.value) {
Swal.fire(
"Deleted!",
"Your file has been deleted.",
"success"
)
// result.dismiss can be "cancel", "overlay",
// "close", and "timer"
} else if (result.dismiss === "cancel") {
Swal.fire(
"Cancelled",
"Your imaginary file is safe :)",
"error"
)
}
});
});
A message with a custom image and CSS animation disabled.
$("#kt_sweetalert_demo_10").click(function(e) {
Swal.fire({
title: "Sweet!",
text: "Modal with a custom image.",
imageUrl: "https://unsplash.it/400/200",
imageWidth: 400,
imageHeight: 200,
imageAlt: "Custom image",
animation: false
});
});
A message with auto close timer.
$("#kt_sweetalert_demo_11").click(function(e) {
Swal.fire({
title: "Auto close alert!",
text: "I will close in 5 seconds.",
timer: 5000,
onOpen: function() {
Swal.showLoading()
}
}).then(function(result) {
if (result.dismiss === "timer") {
console.log("I was closed by the timer")
}
})
});
