<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_1">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_2">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_3">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_4">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_5">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_6">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_7">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_8">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_9">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_10">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_11">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_12">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_13">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_14">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3" id="sweetalert_15">Try Me</button>
<script>
document.getElementById("sweetalert_1").addEventListener("click", function(e) {
Swal.fire("Good job!");
});
document.getElementById('sweetalert_2').addEventListener('click', function(e) {
Swal.fire("Here's the title!", "...and here's the text!");
});
document.getElementById('sweetalert_3').addEventListener('click', function(e) {
Swal.fire("Good job!", "You clicked the button!", "warning");
});
document.getElementById('sweetalert_4').addEventListener('click', function(e) {
Swal.fire("Good job!", "You clicked the button!", "error");
});
document.getElementById('sweetalert_5').addEventListener('click', function(e) {
Swal.fire("Good job!", "You clicked the button!", "success");
});
document.getElementById('sweetalert_6').addEventListener('click', function(e) {
Swal.fire("Good job!", "You clicked the button!", "info");
});
document.getElementById('sweetalert_7').addEventListener('click', function(e) {
Swal.fire("Good job!", "You clicked the button!", "question");
});
document.getElementById('sweetalert_8').addEventListener('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"
}
});
});
document.getElementById('sweetalert_9').addEventListener('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"
}
});
});
document.getElementById('sweetalert_10').addEventListener('click', function(e) {
Swal.fire({
position: "top-right",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500
});
});
document.getElementById('sweetalert_11').addEventListener('click', function(e) {
Swal.fire({
title: 'jQuery HTML example',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
});
});
document.getElementById('sweetalert_12').addEventListener('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"
);
}
});
});
document.getElementById('sweetalert_13').addEventListener('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"
);
} else if (result.dismiss === "cancel") {
Swal.fire(
"Cancelled",
"Your imaginary file is safe :)",
"error"
);
}
});
});
document.getElementById('sweetalert_14').addEventListener('click', function(e) {
Swal.fire({
title: "Sweet!",
text: "Modal with a custom image.",
imageUrl: "https://camo.envatousercontent.com/5b57b814db32f74f4ce750680390a407898cc665/68747470733a2f2f696d616765732e656e76797468656d652e636f6d2f72656163742d76657273696f6e2d617661696c61626c652e6a7067",
imageWidth: 400,
imageHeight: 200,
imageAlt: "Custom image",
animation: false
});
});
document.getElementById('sweetalert_15').addEventListener('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>
