jQuery | Alertify Plugin - GeeksforGeeks

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>
Output: 
 
surindertarika1234
jQuery-Plugin
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
How to redirect to a particular section of a page using HTML or jQuery?
How to prevent Body from scrolling when a modal is opened using jQuery ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?