![](/css/logo.sm.png)
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
alertifyjs/
│
├── build/ # <= build output
│ └── css/
│ └── themes/
│
│
├── docpad/ # <= documentation server
│ ├── data/
│ ├── documents/
│ ├── files/
│ ├── layouts/
│ └── partials/
│
│
│
└── src # <= AlertifyJS source files
├── js/
│ └── dialog/
└── less/
└── themes/
Latest compiled and minified JavaScript and CSS files are hosted on cdn.jsdelivr.net
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/bootstrap.min.css"/>
<!--
RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/bootstrap.rtl.min.css"/>
PM> Install-Package AlertifyJS
npm install alertifyjs --save
<!-- include the script -->
<script src="{PATH}/alertify.min.js"></script>
<!-- include the style -->
<link rel="stylesheet" href="{PATH}/alertify.min.css" />
<!-- include a theme -->
<link rel="stylesheet" href="{PATH}/themes/default.min.css" />
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,
invokeOnCloseOff:false,
frameless:false,
defaultFocusOff: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',
transitionOff:false,
tabbable:'button:not(:disabled):not(.ajs-reset),[href]:not(:disabled):not(.ajs-reset),input:not(:disabled):not(.ajs-reset),select:not(:disabled):not(.ajs-reset),textarea:not(:disabled):not(.ajs-reset),[tabindex]:not([tabindex^="-"]):not(:disabled):not(.ajs-reset)', // <== global default not per instance, applies to all dialogs
// notifier defaults
notifier:{
// auto-dismiss wait time (in seconds)
delay:5,
// default position
position:'bottom-right',
// adds a close button to notifier messages
closeButton: false,
// provides the ability to rename notifier classes
classes : {
base: 'alertify-notifier',
prefix:'ajs-',
message: 'ajs-message',
top: 'ajs-top',
right: 'ajs-right',
bottom: 'ajs-bottom',
left: 'ajs-left',
center: 'ajs-center',
visible: 'ajs-visible',
hidden: 'ajs-hidden',
close: 'ajs-close'
}
},
// 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'
},
// global hooks
hooks:{
// invoked before initializing any dialog
preinit:function(instance){},
// invoked after initializing any dialog
postinit:function(instance){},
},
};