0.5 Usage

Temporary usage page until example site is up.

Install with bower

bower install alertify.js#0.5.0rc1

Source code

• 0.5 tree

New API & Usage

Only supports dialog at the moment. I am thinking of moving the growl notification into its own project. 0.5.0 moves away from dynamically creating the alert dialogs and now includes the markup directly in the page.

Usage

<!-- in the head tag -->
<link rel="stylesheet" href="PATH_TO/alertify.core.css">
<link rel="stylesheet" href="PATH_TO/alertify.default.css">

<!-- preferably just before the closing body tag -->
<div id="alertifyCover" class="alertify-cover alertify-hidden" aria-hidden="true"></div>
<section id="alertifyDialog" class="alertify alertify-close" aria-labelledby="alertifyTitle" aria-hidden="true">
    <div class="alertify-body">
        <p id="alertifyTitle" class="alertify-title"></p>
        <input type="text" id="alertifyInput" class="alertify-input" aria-hidden="true">
        <nav id="alertifyButtons" class="alertify-buttons">
            <button id="alertifyButtonCancel" class="alertify-button alertify-button-cancel" aria-hidden="true"></button>
            <button id="alertifyButtonOk" class="alertify-button alertify-button-ok" aria-hidden="true"></button>
        </nav>
        <a id="alertifyFocusReset" class="alertify-focus-reset" href="#" aria-hidden="true"></a>
    </div>
</section>

<script src="PATH_TO/alertify[.min].js"></script>

Alert

// basic
alertify.alert( 'Title' ).show();

// advanced
var alert = alertify.alert( 'Title' );
alert.ok = function () {
    // OK
};
alert.show();

Confirm

// basic
alertify.confirm( 'Title' ).show();

// advanced
var confirm = alertify.confirm( 'Title' );
confirm.ok = function () {
    // OK
};
confirm.cancel = function () {
    // Cancel
};
confirm.show();

Prompt

// basic
alertify.prompt( 'Title' ).show();

// advanced
var prompt = alertify.prompt( 'Title' );
prompt.ok = function ( val ) {
    // OK
    // val => Value of input field
};
prompt.cancel = function () {
    // Cancel
};
prompt.show();

Extra methods

A few extra methods are available on each dialog.

var alert = alertify.alert( 'Title' );
alert.onshow = function () {
    // called on dialog show
};
alert.onclose = function () {
    // called on dialog closed
};
alert.onfocus = function () {
    // called after focus to element has been set
};

alert.show(); // shows the dialog

// close() is available if a dialog must be closed programmatically, 
// it's automatically call on click of a button
alert.close(); // closes the dialog