Alertify.js – Create Beautiful Browser Dialogs and Notifications

Everyone loves alerts and dialog boxes when they are about to execute any step which they are not confirmed or sure. Each and every website has pre-defined alert, dialog and notification boxes which pop out whenever any condition is executed. These are extremely helpful for the first time user to have the engagement with your app and show them the technical know-how of your working app or system.

How about popping out beautiful alert boxes whenever a user clicks any button or condition?

Yeah…! I have a perfect solution for alert boxes.

alertify js

But before we start, I would like to tell you that I am a big fan of Javascript, Jquery and its libraries and plugins that can do so many wonderful things. I have already written a lot of content on various JS libraries like bounce.js , typewriting effect typed.js , Accounting.js for formatting numbers, currency, Textillate.js, Lettering.js for Web typography, Impress.js for presentations using CSS3 animations. So, let’s get started with Alertify.JS to create browser dialogs and notifications for users.

Getting Started with Alertify.Js

Alertify.js – A javascript framework for developing awesome browser dialogs and notifications.

AlertifyJs is one of the best replacement for default browser dialogs not only it is prettier, it is also very easy to implement and code in your web page.

Let’s see how to implement Alertify.js in your browser.

How to use Alertify.js?

The very first step is to download the Alertify.js library either from the GitHub Repository.

After downloading the script files, just insert in the <head> tag of your web page.

Alertify.js CDN

You can also use the AlertifyJS CDN for more convenience to embed the javascript library.

After inserting the javascript library of AlertifyJs now it’s time to call the library in our files.

The Javascript code to pop out a welcome message.

alertify js welcome message

With this Javascript code, you can pop up a dialog or alert box whenever a user visits your website.

Now if you want to give a link any alert or dialog then you can also do that with alertify.js. I will show you how to do this:

The above Javascript code will pop out an alert when you click on Tuluzz Alert link.

If you want to pop out a confirm dialog box in any of the links then you can also do that. See how:

alertifyjs confirm dialog box

Similarly, you can pop out beautiful dialog boxes whenever required.

Recommended Readings:

Now let’s learn something extra which we can do in Alertify.js

If you want to give a delay to a dialog or alert box then you can also do that with Javascript code. Check out how:

The dialog box will hide after 7 seconds. The default time is 5 seconds.

You can also the replace the default names of the buttons and can also give your custom name.

The Javascript code for Button labels

Wow, that was not that difficult. It seems easy and convenient.

Now I think you’re capable of setting up alerts in your web page on any links, buttons etc.

Why are waiting then, go ahead and check out Alertify.js on your website? For more, you can refer the official website Alertify.js.

(Visited 195 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply