jQuery | Alertify Plugin

Last Updated : 09 Sep, 2021

jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature.
This small library system effectively display confirmation pop ups, success or error alerts, and prompt messages with queued dialogs which can be extensively used in debugging process.

Please download the library and include the required files depending on the project requirements.

Example 1: It is easy to understand, customize and implement in your code. It does not depend on any third party libraries but easily integrate with them. The following code demonstrates the beautiful dialog boxes with its stacking up feature.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>jQuery Alertify Plugin</title>
    <link rel="stylesheet" href="alertify.core.css" />
    <link rel="stylesheet" href="alertify.default.css" id="linkID" />
 
    <script src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
 
    <script src="alertify.min.js"></script>
 
    <style>
        .alertify-log-custom {
            background: green;
        }
 
        .height {
            height: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b> jQuery Alertify Plugin</b>
    <div class="height"></div><br>
 
    <b>Alertify Dialogs</b>
    <div class="height"></div>
    <a href="#" id="alertID">Click Alert Dialog</a><br>
    <a href="#" id="promptID">Click Prompt Dialog</a><br>
    <a href="#" id="confirmID">Click Confirm Dialog</a><br>
    <a href="#" id="focusID">Click Button Focus</a><br>
    <a href="#" id="labelsID">Click Custom Labels</a><br>
    <a href="#" id="orderID">Click Button Order</a>
 
 
    <script>
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
 
            });
        }
 
        // Alertify Standard Dialog boxes
        $("#alertID").on('click', function () {
            reset();
            alertify.alert("Welcome GFG !");
            alertify.alert("Alertify alert dialog");
            return false;
        });
 
        $("#confirmID").on('click', function () {
            reset();
            alertify.confirm(
                "Please confirm the dialog box ", function (event) {
                    if (event) {
                        alertify.success(
                            "You have clicked OK to confirm our"
                            + " terms and conditions.");
                    } else {
                        alertify.error(
                            "You have clicked Cancel not to confirm.");
                    }
                });
            return false;
        });
 
        $("#promptID").on('click', function () {
            reset();
            alertify.prompt(
                "This is a prompt dialog box", function (event, string) {
                    if (event) {
                        alertify.success(
                            "You have clicked OK and typed: " + string);
                    } else {
                        alertify.error(
                            "You have clicked Cancel");
                    }
                }, "Please enter, this is default value");
            return false;
        });
 
 
        $("#success").on('click', function () {
            reset();
            alertify.success("Success message");
            return false;
        });
 
        $("#error").on('click', function () {
            reset();
            alertify.error("Error message");
            return false;
        });
 
 
        $("#labelsID").on('click', function () {
            reset();
            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
            alertify.confirm(
                "Confirm dialog with custom button labels",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
 
        $("#focusID").on('click', function () {
            reset();
            alertify.set({ buttonFocus: "cancel" });
            alertify.confirm(
                "Confirm dialog with cancel button focused",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
 
        $("#orderID").on('click', function () {
            reset();
            alertify.set({ buttonReverse: true });
            alertify.confirm(
                "Confirm dialog with reversed button order",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
    </script>
</body>
 
</html>

Output:

Example 2: The following code demonstrates the use of log messages from alertify.js plugin.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>jQuery Alertify Plugin</title>
    <link rel="stylesheet" href="alertify.core.css" />
    <link rel="stylesheet"
        href="alertify.default.css" id="linkID" />
 
 
    <script src=
        "http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script src="alertify.min.js"></script>
 
    <style>
        .alertify-log-custom {
            background: green;
        }
 
        .height {
            height: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b> jQuery Alertify Plugin</b>
    <div class="height"> </div><br>
 
    <b>Alertify Logs</b>
    <div class="height"> </div>
 
    <a href="#" id="notificationID">Standard Log</a><br>
    <a href="#" id="successID">Success Log</a><br>
    <a href="#" id="errorID">Error Log</a><br>
    <a href="#" id="customID">Custom Log</a><br>
    <a href="#" id="delayID">Hide in 9 seconds</a><br>
    <a href="#" id="foreverID">Persistent Log</a>
 
    <script>
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
 
            });
        }
 
        $("#notificationID").on('click', function () {
            reset();
            alertify.log("Standard log message");
            return false;
        });
 
        $("#successID").on('click', function () {
            reset();
            alertify.success("Success log message");
            return false;
        });
 
        $("#errorID").on('click', function () {
            reset();
            alertify.error("Error log message");
            return false;
        });
 
        // Custom Properties
        $("#delayID").on('click', function () {
            reset();
            alertify.set({ delay: 9000 });
            alertify.log("Hiding in 9 seconds");
            return false;
        });
 
        $("#foreverID").on('click', function () {
            reset();
            alertify.log("It will stay until clicked", "", 0);
            return false;
        });
 
        // Custom Log message
        $("#customID").on('click', function () {
            reset();
            alertify.custom = alertify.extend("custom");
            alertify.custom("Its a custom log message");
            return false;
        });
    </script>
</body>
 
</html>

Output:

Example 3: The following code demonstrates how to implement themeable dialogs and make ajax calls using notification messages as shown in the code.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>jQuery Alertify Plugin</title>
    <link rel="stylesheet" href="alertify.core.css" />
    <link rel="stylesheet"
        href="alertify.default.css" id="linkID" />
 
 
    <script src=
        "http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script src="alertify.min.js"></script>
 
    <style>
        .alertify-log-custom {
            background: green;
        }
 
        .height {
            height: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b> jQuery Alertify Plugin</b>
    <div class="height"> </div><br>
 
    <b>Ajax Multiple Dialogs</b>
    <div class="height"> </div>
    <a href="#" id="ajax">
        Ajax with Multiple Dialog</a>
    <div class="height"> </div><br />
 
    <b>Custom Bootstrap Themes</b>
    <div class="height"> </div>
    <a href="#" id="bootstrap">Bootstrap Theme</a>
 
    <script>
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
 
            });
        }
 
        // Ajax call
        $("#ajax").on("click", function () {
            reset();
            alertify.confirm("Confirm?", function (event) {
                if (event) {
                    alertify.alert("Successful Ajax call after OK");
                } else {
                    alertify.alert("Successful Ajax call after Cancel");
                }
            });
        });
 
        // Custom Themes
        $("#bootstrap").on('click', function () {
            reset();
            $("#linkID").attr("href", "alertify.bootstrap.css");
            alertify.prompt(
                "It prompts dialog with bootstrap theme", 
                    function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                }, "This is Default Value");
            return false;
        });
 
    </script>
 
</body>
 
</html>