Over a million developers have joined DZone.

Alertify.js: Pretty Cool

DZone 's Guide to

Alertify.js: Pretty Cool

· Web Dev Zone ·
Free Resource

Sometimes you come across a library so full of promise and amazingness that you have to write about it before even trying it out.

Alertify.js is a javascript library that brings alert() and prompt() into the web world of 2012. No longer will you be forced to use some arcane instruction full of ugly windows and so terribly un-new it sends chills down your spine just thinking about using it.

Really … was anyone still using that for anything other than debugging? Besides porn phishing sites I mean.

The old alert()

The old alert()

The difference between old way and new is realy quite amazing. While a normal alert() creates a whole new window and blocks javascript execution, alertify’s alert box is a lot easier on the eye, rolls nicely down from the top of the window and most of all is customisable.

Although blocking execution would actually be kind of useful, alertify.js can fake this with careful use of callback soup and apparently manages to do something to at least prevent clicking on the page. So unless you get an event from a timer or a socket, you can rest assured nothing will happen while the alert is displayed.

It also plays nice with us keyboard maniacs – you can use the ESC key to make a Prompt or Confirm dialog go away.

Another feature I really like are the logging facilities. It’s a log you actually won’t mind showing to your users! Wonderful.

Log messages

Log messages

Then again, for debugging I will probably still be using console.log and ruining my sites for all Internet Explorer users when I forget to remove debugging lines … with alertify.js it’s at least impossible to forget.

Oh and another cool thing, Fabien Doiron implemented the whole thing without jQuery, which I think is just impressive, these days I probably can’t do anything without jQuery anymore …


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}