Getting Started

A quick guide of how to download and use AlertifyJS.
Looking for a commercial license ? Keep your source code proprietary and Buy a Commercial License Today!

Download (v1.8.0)


AlertifyJS

Compiled and minified CSS, JavaScript. No docs or original source files are included.
Download Library

Contents

alertifyjs/
├── css/
│   ├── alertify.css
│   ├── alertify.min.css
│   ├── alertify.rtl.css
│   ├── alertify.rtl.min.css
│   └── themes/
│       ├── bootstrap.css
│       ├── bootstrap.min.css
│       ├── bootstrap.rtl.css
│       ├── bootstrap.rtl.min.css
│       ├── default.css
│       ├── default.min.css
│       ├── default.rtl.css
│       ├── default.rtl.min.css
│       ├── semantic.css
│       ├── semantic.min.css
│       ├── semantic.rtl.css
│       └── semantic.min.rtl.css
├── alertify.js
└── alertify.min.js

Source Code

Source Javascript, Less and AlertifyJS docs (see steps for running docs locally).
Download Source

Contents

alertifyjs/
│
├── build/ # <= build output
│   └── css/
│       └── themes/
│
│
├── docpad/ # <= documentation server
│   ├── data/
│   ├── documents/
│   ├── files/
│   ├── layouts/
│   └── partials/
│
│
│
└── src # <= AlertifyJS source files
   ├── js/
   │  └── dialog/
   └── less/
      └── themes/

AlertifyJS CDN

Latest compiled and minified JavaScript and CSS files are hosted on cdn.jsdelivr.net


<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/bootstrap.min.css"/>

<!-- 
    RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/bootstrap.rtl.min.css"/>

Install with NuGet


PM> Install-Package AlertifyJS

Install with NPM


npm install alertifyjs --save

Usage


Include JS

<!-- include the script -->
<script src="{PATH}/alertify.min.js"></script>

Include CSS

<!-- include the style -->
<link rel="stylesheet" href="{PATH}/alertify.min.css" />
<!-- include a theme -->
<link rel="stylesheet" href="{PATH}/themes/default.min.css" />

Start coding!

alertify.alert('Ready!');

Defaults


The following are the global defaults used by AlertifyJS, override with your own prior to components initialization.


alertify.defaults = {
        // dialogs defaults
        autoReset:true,
        basic:false,
        closable:true,
        closableByDimmer:true,
        frameless:false,
        maintainFocus:true, // <== global default not per instance, applies to all dialogs
        maximizable:true,
        modal:true,
        movable:true,
        moveBounded:false,
        overflow:true,
        padding: true,
        pinnable:true,
        pinned:true,
        preventBodyShift:false, // <== global default not per instance, applies to all dialogs
        resizable:true,
        startMaximized:false,
        transition:'pulse',

        // notifier defaults
        notifier:{
            // auto-dismiss wait time (in seconds)  
            delay:5,
            // default position
            position:'bottom-right'
        },

        // language resources 
        glossary:{
            // dialogs default title
            title:'AlertifyJS',
            // ok button text
            ok: 'OK',
            // cancel button text
            cancel: 'Cancel'            
        },

        // theme settings
        theme:{
            // class name attached to prompt dialog input textbox.
            input:'ajs-input',
            // class name attached to ok button
            ok:'ajs-ok',
            // class name attached to cancel button 
            cancel:'ajs-cancel'
        }
    };