browser dialogs never
looked so good

Fork me on GitHub Native browser dialogs versus alertify.js dialogs

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.

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

If you can edit CSS you can customize the look of alertify.js to match your needs

Lightweight, no dependencies

No matter the type of project, if JavaScript is available alertify.js can be used

Growl-like notification

Unobtrusive notification messages can be used to give feedback to users or even as a console.log replacement

Cross-browser and platform

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

Download 0.3.11 (zip)

Or install via bower

Alertify.js can be installed using bower.

						$ bower install alertify.js

usage

Insert into HTML

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" />

default usage

Default dialogs

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

					// confirm dialog
					alertify.confirm("Message", function (e) {
						if (e) {
							// 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");

Default notifications

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

customizable properties

					// using the `set` method
					alertify.set( ... );

Delay

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

Button labels

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

Button focus

					// which button receives focus
					// default: OK
					alertify.set({ buttonFocus: "cancel" }); // "none", "ok", "cancel"
					// focus will be given to the cancel button
					alertify.confirm("Message");

Button order

					// order of the buttons
					// default: Cancel, OK
					alertify.set({ buttonReverse: true }); // true, false
					// buttons order will be OK, Cancel
					alertify.confirm("Message");

custom notification

					// extend log method
					// set it
					alertify.custom = alertify.extend("custom");
					// use it
					alertify.custom("Notification");

custom themes

					// bootstrap theme
					// use bootstrap theme CSS
					// themes/alertify.bootstrap.css
					alertify.prompt("message", ...);