jQuery | Alertify Plugin

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
    <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, strng) {
                    if (event) {
                        alertify.success(
                            "You have clicked OK and typed: " + strng);
                    } 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>

chevron_right


Output:

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.