All of AlertifyJS animation/transition effects are disabled due to user preference that the system minimizes the amount of animation or motion it uses. See prefers-reduced-motion CSS media feature.

Download (v1.14.0)

AlertifyJS

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

Download Library

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

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/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"/>

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,
        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){},
        },
    };

Getting Started