Educational

Alertify.js

Written by

Saim Khalid

in

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;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Dialogs&lt;/h2&gt;&lt;a href ="#" id ="alert"&gt;Alert Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="confirm"&gt;Confirm Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="prompt"&gt;Prompt Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="labels"&gt;Custom Labels&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="focus"&gt;Button Focus&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="order"&gt;Button Order&lt;/a&gt;&lt;h2&gt;Ajax&lt;/h2&gt;&lt;a href ="#" id ="ajax"&gt;Ajax - Multiple Dialog&lt;/a&gt;&lt;h2&gt;Logs&lt;/h2&gt;&lt;a href ="#" id ="notification"&gt;Standard Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="success"&gt;Success Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="error"&gt;Error Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="custom"&gt;Custom Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="delay"&gt;Hide in10 seconds&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="forever"&gt;Persistent Log&lt;/a&gt;&lt;h2&gt;Themes&lt;/h2&gt;&lt;a href ="#" id ="bootstrap"&gt;Bootstrap Theme&lt;/a&gt;&lt;script src ="https://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;&lt;script src ="alertify.min.js"&gt;&lt;/script&amp;gt
		

  &lt;script&gt;functionreset(){$("#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");returnfalse;});$("#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");}});returnfalse;});$("#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");returnfalse;});$("#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");returnfalse;});$("#success").on('click',function(){reset();
        alertify.success("Success log message");returnfalse;});$("#error").on('click',function(){reset();
        alertify.error("Error log message");returnfalse;});$("#delay").on('click',function(){reset();
        alertify.set({ delay:10000});
        alertify.log("Hiding in 10 seconds");returnfalse;});$("#forever").on('click',function(){reset();
        alertify.log("Will stay until clicked","",0);returnfalse;});$("#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");}});returnfalse;});$("#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");}});returnfalse;});$("#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");}});returnfalse;});$("#custom").on('click',function(){reset();
        alertify.custom = alertify.extend("custom");
        alertify.custom("I'm a custom log message");returnfalse;});$("#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");returnfalse;});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts