Sweet Alerts
Basic alert
<button type="button" class="btn-primary rounded-3" id="sweetalert_1">Show Me</button>
<script>
$("#sweetalert_1").click(function(e) {
Swal.fire("Good job!");
});
</script>
Alert title and text.
<button type="button" class="btn-primary rounded-3" id="sweetalert_2">Show Me</button>
<script>
$("#sweetalert_2").click(function(e) {
Swal.fire("Here's the title!", "...and here's the text!");
});
</script>
State Icons
<button type="button" class="btn-primary rounded-3" id="sweetalert_3">Show Me</button>
<button type="button" class="btn-primary rounded-3" id="sweetalert_4">Show Me</button>
<button type="button" class="btn-primary rounded-3" id="sweetalert_5">Show Me</button>
<button type="button" class="btn-primary rounded-3" id="sweetalert_6">Show Me</button>
<button type="button" class="btn-primary rounded-3" id="sweetalert_7">Show Me</button>
<script>
$("#sweetalert_3").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "warning");
});
$("#sweetalert_4").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "error");
});
$("#sweetalert_5").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "success");
});
$("#sweetalert_6").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "info");
});
$("#sweetalert_7").click(function(e) {
Swal.fire("Good job!", "You clicked the button!", "question");
});
</script>
Change confirm button text and class
<button type="button" class="btn-primary rounded-3" id="sweetalert_8">Show Me</button>
<script>
$("#sweetalert_8").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"
}
});
});
</script>
Custom button with icon
<button type="button" class="btn-primary rounded-3" id="sweetalert_9">Show Me</button>
<script>
$("#sweetalert_9").click(function (e) {
Swal.fire({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
buttonsStyling: false,
confirmButtonText: " I am game!",
showCancelButton: true,
cancelButtonText: " No, thanks",
customClass: {
confirmButton: "btn btn-danger",
cancelButton: "btn btn-default"
}
});
});
</script>
A custom positioned dialog with timer to auto close.
<button type="button" class="btn-primary rounded-3" id="sweetalert_10">Show Me</button>
<script>
$("#sweetalert_10").click(function(e) {
Swal.fire({
position: "top-right",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500
});
});
</script>
jQuery HTML with custom animate.css animation.
<button type="button" class="btn-primary rounded-3" id="sweetalert_11">Show Me</button>
<script>
$('#sweetalert_11').click(function (e) {
Swal.fire({
title: 'jQuery HTML example',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
});
});
</script>
A warning message, with a function attached to the confirm button.
<button type="button" class="btn-primary rounded-3" id="sweetalert_12">Show Me</button>
<script>
$("#sweetalert_12").click(function(e) {
Swal.fire({
title: "Are you sure?",
text: "You won to 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"
)
}
});
});
</script>
By passing a parameter, you can execute something else for cancel.
<button type="button" class="btn-primary rounded-3" id="sweetalert_13">Show Me</button>
<script>
$("#sweetalert_13").click(function(e) {
Swal.fire({
title: "Are you sure?",
text: "You won to 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"
)
}
});
});
</script>
A message with auto close timer.
<button type="button" class="btn-primary rounded-3" id="sweetalert_15">Show Me</button>
<script>
$("#sweetalert_15").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")
}
})
});
</script>
A message with a custom image and CSS animation disabled.
<button type="button" class="btn-primary rounded-3" id="sweetalert_14">Show Me</button>
<script>
$("#sweetalert_14").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
});
});
</script>