jQuery - Alertify.js

Alertify.js is a jQuery plugin for showing alert messages in different format

A Simple of alertify example as shown below

<!doctype html>

<html lang = "en">

 

   <head>

      <meta charset = "utf-8">

      <title>alertify.js - example page</title>

      <link rel = "stylesheet" href = "alertify.core.css" />

      <link rel = "stylesheet" href = "alertify.default.css" id = "toggleCSS" />

      <meta name = "viewport" content = "width = device-width">

                       

      <style>

         .alertify-log-custom {

            background: blue;

         }

      </style>

   </head>

           

   <body>

 

      <h2>Dialogs</h2>

                       

      <a href = "#" id = "alert">Alert Dialog</a><br>

      <a href = "#" id = "confirm">Confirm Dialog</a><br>

      <a href = "#" id = "prompt">Prompt Dialog</a><br>

      <a href = "#" id = "labels">Custom Labels</a><br>

      <a href = "#" id = "focus">Button Focus</a><br>

      <a href = "#" id = "order">Button Order</a>

 

      <h2>Ajax</h2>

      <a href = "#" id = "ajax">Ajax - Multiple Dialog</a>

 

      <h2>Logs</h2>

                       

      <a href = "#" id = "notification">Standard Log</a><br>

      <a href = "#" id = "success">Success Log</a><br>

      <a href = "#" id = "error">Error Log</a><br>

      <a href = "#" id = "custom">Custom Log</a><br>

      <a href = "#" id = "delay">Hide in 10 seconds</a><br>

      <a href = "#" id = "forever">Persistent Log</a>

 

      <h2>Themes</h2>

      <a href = "#" id = "bootstrap">Bootstrap Theme</a>

 

      <script src = "http://code.jquery.com/jquery-1.9.1.js"></script>

      <script src = "alertify.min.js"></script>

                       

      <script>

         function reset () {

            $("#toggleCSS").attr("href", "alertify.default.css");

                                                

            alertify.set({

               labels : {

                  ok     : "OK",

                  cancel : "Cancel"

               },

                                                            

               delay : 5000,

               buttonReverse : false,

               buttonFocus   : "ok"

            });

         }

 

                       

         $("#alert").on( 'click', function () {

            reset();

            alertify.alert("This is an alert dialog");

            return false;

         });

 

         $("#confirm").on( 'click', function () {

            reset();

                                                

            alertify.confirm("This is a confirm dialog", function (e) {

               if (e) {

                  alertify.success("You've clicked OK");

               } else {

                  alertify.error("You've clicked Cancel");

               }

            });

                                                

            return false;

         });

 

         $("#prompt").on( 'click', function () {

            reset();

                                                

            alertify.prompt("This is a prompt dialog", function (e, str) {

               if (e) {

                  alertify.success("You've clicked OK and typed: " + str);

               } else {

                  alertify.error("You've clicked Cancel");

               }

            }, "Default Value");

                                                

            return false;

         });

 

         $("#ajax").on("click", function () {

            reset();

                                                

            alertify.confirm("Confirm?", function (e) {

               if (e) {

                  alertify.alert("Successful AJAX after OK");

               } else {

                  alertify.alert("Successful AJAX after Cancel");

               }

            });

         });

 

         $("#notification").on( 'click', function () {

            reset();

            alertify.log("Standard log message");

            return false;

         });

                                    

         $("#success").on( 'click', function () {

            reset();

            alertify.success("Success log message");

            return false;

         });

 

         $("#error").on( 'click', function () {

            reset();

            alertify.error("Error log message");

            return false;

         });

 

           

         $("#delay").on( 'click', function () {

            reset();

            alertify.set({ delay: 10000 });

            alertify.log("Hiding in 10 seconds");

            return false;

         });

 

         $("#forever").on( 'click', function () {

            reset();

            alertify.log("Will stay until clicked", "", 0);

            return false;

         });

 

         $("#labels").on( 'click', function () {

            reset();

            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });

                                                

            alertify.confirm("Confirm dialog with custom button labels", function (e) {

               if (e) {

                  alertify.success("You've clicked OK");

               } else {

                  alertify.error("You've clicked Cancel");

               }

            });

                                                

            return false;

         });

 

         $("#focus").on( 'click', function () {

            reset();

            alertify.set({ buttonFocus: "cancel" });

                                                

            alertify.confirm("Confirm dialog with cancel button focused", function (e) {

               if (e) {

                  alertify.success("You've clicked OK");

               } else {

                  alertify.error("You've clicked Cancel");

               }

            });

                                                

            return false;

         });

 

         $("#order").on( 'click', function () {

            reset();

            alertify.set({ buttonReverse: true });

                                                

            alertify.confirm("Confirm dialog with reversed button order", function (e) {

               if (e) {

                  alertify.success("You've clicked OK");

               } else {

                  alertify.error("You've clicked Cancel");

               }

            });

                                                

            return false;

         });

 

         $("#custom").on( 'click', function () {

            reset();

            alertify.custom = alertify.extend("custom");

            alertify.custom("I'm a custom log message");

            return false;

         });

 

         $("#bootstrap").on( 'click', function () {

            reset();

            $("#toggleCSS").attr("href", ".alertify.bootstrap.css");

                                                

            alertify.prompt("Prompt dialog with bootstrap theme", function (e) {

               if (e) {

                  alertify.success("You've clicked OK");

               } else {

                  alertify.error("You've clicked Cancel");

               }

            }, "Default Value");

                                                

            return false;

         });

                                    

      </script>

 

   </body>

           

</html>