Sweet Alarts

Sweet Alarts


<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_1">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_2">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_3">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_4">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_5">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_6">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_7">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_8">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_9">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_10">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_11">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_12">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_13">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" id="sweetalert_14">Try Me</button>
<button type="button" class="btn btn-primary text-white fs-16 fw-semibol py-2 px-3 mt-2 me-2" 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>