Alertify.js – Lightweight Customizable Browser Dialogs

July 19, 2013

Alertify.js is one of best jQuery plugin to display lightweight customizable dialogs in browser window for your website when implemented. It’s a small library for presenting beautiful dialog windows and notifications. Alertify.js is easy customize via CSS. It has a good API and doesn’t depend on third-party libraries (but plays nicely with them).

Alertify js custom browser dialog

To use it, include the css and js files in the section of the webpage where you want to display your lightweight customizable browser dialogs like this:

Include JS

<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>

Include CSS

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

Finally, call the methods of the global alertify object:

Alert Dialog

// alert dialog
alertify.alert("Message");

Confirm Dialog

// confirm dialog
alertify.confirm("Message", function (e) {
 if (e) {
 // user clicked "ok"
 } else {
 // user clicked "cancel"
 }
});

Prompt Dialog

// prompt dialog
alertify.prompt("Message", function (e, str) {
 // str is the input text
 if (e) {
 // user clicked "ok"
 } else {
 // user clicked "cancel"
 }
}, "Default Value");

Download alertify.js

Muhammad Dilawar

Muhammad Dilawar is a WordPress developer and technical SEO specialist with over 12 years of experience building, optimizing, and maintaining websites. He specializes in WordPress, WooCommerce, server optimization, DNS, Cloudflare, website security, and performance improvements. Through Softstribe, he shares practical guides, tutorials, and industry insights based on real-world experience helping businesses grow their online presence.