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!");
});
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");
});
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
});
});
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")
}
})
});
