Sweetalert

Use SweetAlert2 to display beautiful, responsive, and customizable alerts in your project.

Step 1: Install SweetAlert2

You can install SweetAlert2 via yarn.

yarn add sweetalert2

Step 2: Include SweetAlert CSS & Script

Include the SweetAlert2 CSS and JS files from your local libs folder.

<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="../assets/libs/sweetalert2/sweetalert2.min.css">

<!-- SweetAlert2 Script -->
<script src="../assets/libs/sweetalert2/sweetalert2.min.js"></script>

Step 3: Add Button HTML

Create a button element that triggers the SweetAlert popup.

<button type="button" class="btn btn-primary" id="swal-1">Click me</button>

Step 4: Initialize SweetAlert

Use the following JavaScript code to trigger SweetAlert with custom styling and toast options.

"use strict";

$(function () {
    var n = Swal.mixin({
        customClass: {
            confirmButton: "btn btn-primary mx-1",
            denyButton: "btn btn-secondary mx-1",
            cancelButton: "btn btn-danger mx-1"
        },
        buttonsStyling: false
    }),
    t = Swal.mixin({
        toast: true,
        position: "top-end",
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: function (t) {
            t.addEventListener("mouseenter", Swal.stopTimer),
            t.addEventListener("mouseleave", Swal.resumeTimer)
        }
    });

    $("#swal-1").on("click", function () {
        n.fire("Welcome to Aquiry!")
    });
});

For advanced configuration, events, and styling, visit the SweetAlert2 documentation.