alertify.js
browser dialogs never
looked so good
alertify.js
Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren't leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain - by all means go for it!
It's been great seeing people use it and enjoy it and this decision is simply because I don't believe it's fair that developers are looking for help and not getting it.
I wish I had more time or contributions to keep it going and make it better, but the sad reality is that not usually the case on these kinds of projects.
I will be updating this site to list forks of alertify.js. At this time none are the official successor, I will leave the community to decide which one should become the main repo. If you have a fork and are interested in taking over alertify.js, please send me a note.
If you can edit CSS you can customize the look of alertify.js to match your needs
No matter the type of project, if JavaScript is available alertify.js can be used
Unobtrusive notification messages can be used to give feedback to users or even as a console.log replacement
Whether you use a desktop, laptop, tablet or mobile device, alertify.js has you covered
From callbacks to handle OK and Cancel actions to customizable properties, using alertify.js is very straightforward
Read full documentation
Include JS
<!-- ideally at the bottom of the page -->
<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>
Include CSS
<!-- include the core styles -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />
/**
* Alertify Alert Dialog
*
* @param {String} Dialog message
* @param {Function} [Optional] Callback after OK
* @return {Object} Dialog Object
*/
Alertify.dialog.alert("Message");
// Alertify.dialog can be stored in a variable
// var d = Alertify.dialog;
// d.alert("Message");
/**
* Alertify Confirm Dialog
*
* @param {String} Dialog message
* @param {Function} [Optional] Callback after OK
* @param {Function} [Optional] Callback after Cancel
* @return {Object} Dialog Object
*/
Alertify.dialog.confirm("Message", function () {
// user clicked "ok"
}, function () {
// user clicked "cancel"
});
// Alertify.dialog can be stored in a variable
// var d = Alertify.dialog;
// d.confirm("Message");
/**
* Alertify Prompt Dialog
*
* @param {String} Dialog message
* @param {Function} [Optional] Callback after OK
* @param {Function} [Optional] Callback after Cancel
* @param {String} [Optional] Default placeholder text
* @return {Object} Dialog Object
*/
Alertify.dialog.prompt("Message", function (str) {
// str is the input text
// user clicked "ok"
}, function () {
// user clicked "cancel"
}, "Default Value");
// Alertify.dialog can be stored in a variable
// var d = Alertify.dialog;
// d.prompt("Message");
/**
* Alertify Log
*
* @param {String} Log type
* @param {String} Log message
* @param {Number} [Optional] Delay in ms, 0 means persistent
* @return {Object} Log Object
*/
Alertify.log.create("info", "Notification");
// Alertify.log can be stored in a variable
// var l = Alertify.log;
// l.create("info", "Message");
/**
* Alertify Info Log
*
* @param {String} Log message
* @param {Number} [Optional] Delay in ms, 0 means persistent
* @return {Object} Log Object
*/
Alertify.log.info("Notification");
// Alertify.log can be stored in a variable
// var l = Alertify.log;
// l.info("Message");
/**
* Alertify Success Log
* shorthand for Alertify.log.create("success", "Notification");
*
* @param {String} Log message
* @param {Number} [Optional] Delay in ms, 0 means persistent
* @return {Object} Log Object
*/
Alertify.log.success("Success notification");
// Alertify.log can be stored in a variable
// var l = Alertify.log;
// l.success("Message");
/**
* Alertify Error Log
* shorthand for Alertify.log.create("error", "Notification");
*
* @param {String} Log message
* @param {Number} [Optional] Delay in ms, 0 means persistent
* @return {Object} Log Object
*/
Alertify.log.error("Error notification");
// Alertify.log can be stored in a variable
// var l = Alertify.log;
// l.error("Message");
// Storing log element
var myLog = Alertify.log.create("custom", "stored notification");
// myLog API
myLog.close(); // closes the log element
myLog.create(); // recreates (doesn't show) the closed log element
myLog.show(); // show the recreated log element
Alertify.log.info("Hiding in 10 secs", 10000);
Alertify.log.info("Will stay until clicked", 0);
// Alertify.log can be stored in a variable
// var l = Alertify.log;
// l.info("Message");
// custom OK and Cancel label
// default: "OK", "Cancel"
Alertify.dialog.labels.ok = "Accept";
Alertify.dialog.labels.cancel = "Deny";
// button labels will be "Accept" and "Deny"
Alertify.dialog.confirm("Message");
// which button receives focus
// default: "ok"
Alertify.dialog.buttonFocus = "cancel"; // "none", "ok", "cancel"
// focus will be given to the cancel button
Alertify.dialog.confirm("Message");
// order of the buttons
// default: Cancel, OK
Alertify.dialog.buttonReverse = true;
// buttons order will be OK, Cancel
Alertify.dialog.confirm("Message");
// bootstrap theme
// use bootstrap theme CSS
// themes/alertify.bootstrap.css
Alertify.dialog.prompt("message", ...);