16/12/2015
alertify.js browser dialogs never looked so good
ALERTIFY.js
browser dialogs never
looked so good
Follow me: fabiend and @fabien_doiron
The end of maintenance... at least for now
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.
Forks
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.
alertifyjs.org
alertifyjs.com
http://fabiend.github.io/alertify.js/
1/6
16/12/2015
alertify.js browser dialogs never looked so good
download alertify.js
Download 0.3.11 (zip)
Source Code (GitHub)
If you want to help out with code contribution or testing in the next release of alertify, check out alertify.js 0.5.0
Deprecated: Want a sneak peak of what's coming up? Check out alertify.js 0.4.0rc1
features
Customizable look and feel
Lightweight, no dependencies
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
Growllike notification
Crossbrowser and platform
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
Simple API
From callbacks to handle OK and Cancel actions
to customizable properties, using alertify.js is very
straightforward
Read full documentation
setup
Download source code
Or install via bower
Alertify.js can be installed using bower.
Advertisement
http://fabiend.github.io/alertify.js/
2/6
16/12/2015
alertify.js browser dialogs never looked so good
Download 0.3.11 (zip)
1
$ bower install alertify.js
usage
Insert into HTML
Include JS
1
2
3
<!‐‐ ideally at the bottom of the page ‐‐>
<!‐‐ also works in the <head> ‐‐>
<script src="PATH_TO_FILE/alertify.min.js"></script>
Include CSS
1
2
3
4
<!‐‐ 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" />
default usage
Default dialogs
1
2
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
// alert dialog
alertify.alert("Message");
// confirm dialog
alertify.confirm("Message", function (e) {
if (e) {
Advertisement
// user clicked "ok"
} else {
// user clicked "cancel"
}
});
// prompt dialog
alertify.prompt("Message", function (e, str) {
// str is the input text
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
}, "Default Value");
Alert Dialog
Confirm Dialog
Prompt Dialog
http://fabiend.github.io/alertify.js/
3/6
16/12/2015
alertify.js browser dialogs never looked so good
Default notifications
1
2
3
4
1
2
3
1
2
3
// standard notification
// setting the wait property to 0 will
// keep the log message until it's clicked
alertify.log("Notification", type, wait);
// success notification
// shorthand for alertify.log("Notification", "success");
alertify.success("Success notification");
// error notification
// shorthand for alertify.log("Notification", "error");
alertify.error("Error notification");
Standard Log
Success Log
Error Log
customizable properties
1
2
// using the set method
alertify.set( ... );
Delay
Advertisement
1
2
3
4
5
6
7
8
// time (in ms) before log message hides
// default: 5000
alertify.set({ delay: 10000 });
// log will hide after 10 seconds
alertify.log("Notification");
// setting the delay to 0 will leave
// the log message until it's clicked
alertify.log("Notification", "", 0);
Hide in 10 seconds
Persistent Log
Button labels
1
2
3
4
5
6
7
8
// custom OK and Cancel label
// default: OK, Cancel
alertify.set({ labels: {
ok : "Accept",
cancel : "Deny"
} });
// button labels will be "Accept" and "Deny"
alertify.confirm("Message");
Custom Labels
http://fabiend.github.io/alertify.js/
4/6
16/12/2015
Button focus
alertify.js browser dialogs never looked so good
1
2
3
4
5
// which button receives focus
// default: OK
alertify.set({ buttonFocus: "cancel" }); // "none", "ok", "cancel"
// focus will be given to the cancel button
alertify.confirm("Message");
Advertisement
Button Focus
Button order
1
2
3
4
5
// order of the buttons
// default: Cancel, OK
alertify.set({ buttonReverse: true }); // true, false
// buttons order will be OK, Cancel
alertify.confirm("Message");
Button Order
custom notification
1
2
3
4
5
// extend log method
// set it
alertify.custom = alertify.extend("custom");
// use it
alertify.custom("Notification");
Custom Log
custom themes
1
2
3
4
// bootstrap theme
// use bootstrap theme CSS
// themes/alertify.bootstrap.css
alertify.prompt("message", ...);
Bootstrap Theme
http://fabiend.github.io/alertify.js/
5/6
16/12/2015
alertify.js browser dialogs never looked so good
Report an issue | View on GitHub | Follow Me on GitHub and Twitter
Gratipay
alertify.js is licensed under MIT, copyright © Fabien Doiron
JavaScript Weekly, No. 108
HTML5 Weekly, No. 95
The Treehouse Show, Ep. 22
webdev radio, Ep. 105
http://fabiend.github.io/alertify.js/
6/6