--- layout: 'default' hljs: 'light' ---

Getting Started

A quick guide of how to download and use AlertifyJS.
<%- @partial('ad') %>
Looking for a commercial license ? Keep your source code proprietary and Buy a Commercial License Today!

Download (v<%=@getPackage().version%>)

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

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!');
Run

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'
        }
    };