alertify.js

Simple browser dialogs v1.0.11

Alertify.js is a small library which provides light-weight, high performance browser dialogs. Since it uses only 1 HTTP request and a payload of less than 3kB, it's a great option for adding basic style to alert, dialog, prompt and log messages even on low bandwidth connections.

Getting Started

Notes

We're working to get the latest version on all major public CDN's but until then, you'll need to either use a GitHub raw service, download it, or install via NPM or Bower.

Obviously, if you're installing via Bower or NPM, you'll need to include the files in the "dist" directory in your HTML for everything to work. But you knew that already.

It's also worth noting that the CSS is bundled by default, so there's no need to include any stylesheets to use the default theme. It's dyamically inserted before any other <link> elements (like) stylesheets so it's super easy to override with your own styles.

Via RawGit

<-- standard version -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.11/dist/js/alertify.js"></script>

<-- angular module -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.11/dist/js/ngAlertify.js"></script>

Via Bower

bower install --save alertifyjs

Via NPM

npm install --save alertify.js

Disabling CSS Injection

If you don't want to inject CSS for some reason, just insert your own styles (any style or link element with an id of alertifyCSS) before the javascript file:

<link rel="stylesheet"
      href="/path/to/custom/styles.css"
      id="alertifyCSS">
<script src="/path/to/alertify.js"></script>

AngularJS

An AngularJS module is also included. It's in the "ngAlertify.js" file, so use that instead if you're building an AngularJS app.

If you want to check out a live demo of log messages with ngAlertify, click here.

Initialize ngAlertify

// Make sure to include the ngAlertify.js file.
angular
    .module("myApp", ["ngAlertify"])
    .controller("myController", function($scope, alertify) {
        alertify.success("Welcome to alertify!");
    });

Performance

Alertify is designed from the ground-up for great performance and a small footprint. That means it's not as feature-rich as some other options. That's on purpose. We don't plan on adding a lot more features so it stays a great option for every kind of website and user.

Currently, the entire library, with JavaScript and CSS is ~2.29 kB (gzipped), and getting smaller all the time. That's quite impressive considering it's only a single HTTP request, and no external dependencies at all being required.

The Angular module is only 2.32kB, so that's light, too!

Usage

Dialogs

Alert Dialog

Dialogs display a text and require user to acknowledge the message.

Try It

Code Example

alertify.alert("Message");

Confirm Dialog

Try It

Code Example

// confirm dialog
alertify.confirm("Message", function () {
    // user clicked "ok"
}, function() {
    // user clicked "cancel"
});

Prompt Dialog

Try It

Code Example

alertify
  .defaultValue("Default Value")
  .prompt("This is a prompt dialog",
    function (val, ev) {

      // The click event is in the event variable, so you can use it here.
      ev.preventDefault();

      // The value entered is availble in the val variable.
      alertify.success("You've clicked OK and typed: " + val);

    }, function(ev) {

      // The click event is in the event variable, so you can use it here.
      ev.preventDefault();

      alertify.error("You've clicked Cancel");

    }
  });

Custom Labels

You're not limited to the "Ok" and "Cancel" button labels. You can easily set your own labels.

Try It

Code Example

alertify
  .okBtn("Accept")
  .cancelBtn("Deny")
  .confirm("Confirm dialog with custom button labels", function (ev) {

      // The click event is in the
      // event variable, so you can use
      // it here.
      ev.preventDefault();
      alertify.success("You've clicked OK");

  }, function(ev) {

      // The click event is in the
      // event variable, so you can use
      // it here.
      ev.preventDefault();

      alertify.error("You've clicked Cancel");

  });

Ajax - Multiple Dialog

Try It

Code Example

alertify.confirm("Confirm?", function (ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.alert("Successful AJAX after OK");


}, function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.alert("Successful AJAX after Cancel");

});

Promise Aware

If your browser supports promises, you can use them instead of callbacks

Try It

Code Example

  if ("function" !== typeof Promise) {
      alertify.alert("Your browser doesn't support promises");
      return;
  }

  alertify.confirm("Confirm?").then(function (resolvedValue) {
      // "resolvedValue" is an object with the following keys:
      // buttonClicked
      // inputValue (only for prompts)
      // event

      // The click event is in
      // resolvedValue, so you can use
      // it here.
      resolvedValue.event.preventDefault();
      alertify.alert("You clicked the " + resolvedValue.buttonClicked + " button!");
  });

Log Messages

Setting the Position

Try It

Code Example

alertify.delay(1000); // This is just to make the demo go faster.
alertify.log("Default botoom left position");
setTimeout(function() {
    alertify.logPosition("top left");
    alertify.log("top left");
}, 1500);
setTimeout(function() {
    alertify.logPosition("top right");
    alertify.log("top right");
}, 3000);
setTimeout(function() {
    alertify.logPosition("bottom right");
    alertify.log("bottom right");
}, 4500);
setTimeout(function() {
    alertify.reset(); // Puts the message back to default position.
    alertify.log("Back to default");
}, 6000);

Setting the parent element

You can set where parent element where Alertify is appended into the DOM.

Code Example

// By default, Alertify is appended to document.body.
// You can easily change that, though, like this:
var elem = document.getElementById("my-element");
alertify.parent(elem);

Standard Log

Try It

Code Example

alertify.log("Standard log message");

Standard Log With HTML

HTML works just fine in log messages. Have at it!

Try It

Code Example

var msg = "<img src='https://placehold.it/256x128'>" +
          "<h3>This is HTML</h3>" +
          "<p>It's great, right?</p>";
alertify.log(msg);

Standard Log with callback

Keep in mind that the when setting a callback, clicking the log message doesn't automatically close the log message, which is different than previous functionality. This means that the callback could be called multiple times if the user clicks multiple times. If you're callback is an action that must be completed only once, you'll need to keep track of that separately.

Try It

Code Example

alertify.log("Standard log message with callback", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.log("You clicked the notification");

});

Success Log

Try It

Code Example

alertify.success("Success log message");

Success Log with callback

Try It

Code Example

alertify.success("Standard log message with callback", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.success("You clicked the notification");

});

Error Log

Try It

Code Example

alertify.error("Error log message");

Error Log with callback

Try It

Code Example

alertify.error("Standard log message with callback", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.    ev.preventDefault();
    alertify.error("You clicked the notification");

});

Closing Log On Click

Try It

Code Example

alertify
  .closeLogOnClick(true)
  .log("Click me to close!");

Disable Log On Click

Clicking on a log message to close is disabled by default, but if you've enabled it and need to reset it to disabled, you can do so very easily.

The decision to disable it by default was to allow any type of html to be included in the log messages, including links.

Try It

Code Example

alertify
  .closeLogOnClick(true)
  .log("Click me to close!")
  .closeLogOnClick(false)
  .log("You can't click to close this!");

Hide in 10 seconds

Try It

Code Example

alertify.delay(10000).log("Hiding in 10 seconds");

Persistent Log

Persistent log messages will stay until clicked (if closeLogOnClick(true) is set) or until forcibly removed when the number of messages exceeds the maxLogItems setting.

Try It

Code Example

alertify.delay(0).log("Will stay until clicked");

Maximum Number of Log Messages

You can easily set the maximum number of log/success/error messages that will be displayed at a single time. The default is two.

Try It

Code Example

alertify
  .maxLogItems(1)
  .log("This is the first message");

// The timeout is just for visual effect.
setTimeout(function() {
  alertify.log("The second message will force the first to close.");
}, 1000);

Setting a template for logs

You can change the template for all logs.

Try It

Code Example

alertify
  .setLogTemplate(function (input) { return 'log message: ' + input; })
  .log("This is the message");

Other Options

Resetting Default Values

When you change values like the button labels, delays, default prompt values or placeholders, etc., you can easily reset the defaults.

Try It

Code Example

// Notice the okay button is not the custom value, it was reset.
alertify
  .okBtn("Go For It!")
  .reset()
  .alert("Custom values were reset!");