1. INCLUDE CSS AND JS FILES
<!-- 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" />
<!-- ideally at the bottom of the page -->
<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>
2. JAVASCRIPT
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");
3. EXAMPLES
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", ...);
JS Tutorial
