Add fancy alert and notification popup using alertify.js

Here I found a great jquery plugin to add fancy alert and notification popup using alertify.js, So I am going to share quick tip about how to integrate alertify.js plugin on your website and use so many alert popup option to make your website notification more dynamic and attractive.



Working with alertify.js is so easy because of it’s clean and clear api documentation. by adding small jquery codes you can create fancy popup in seconds.

First add required libraries on your page.

<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />
<script src="PATH_TO_FILE/alertify.min.js"></script>

All done now you can pick you desired alert box by adding following jquery code, some are following.

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");


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");


You can also add sidebar bar logs / notification.

alertify.log("Notification", type, wait);

// success notification
alertify.success("Success notification");

// error notification
alertify.error("Error notification");