AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.

View on GitHub Download

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.

Feature-rich

Packed with awesome features! Modal and Modelss view modes, Move, Resize and more!

Extensible

Extend existing dialogs, or create your own! using AlertifyJS is very straightforward.

Unobtrusive notifications

Unobtrusive notification messages can be used to give feedback to users.

Themeable

Three themes right out-of-the-box (AlertifyJS, Semantic and Bootstrap). view example

Responsive

Whether you use a desktop, laptop, tablet or mobile device. Have no worries!

i18n and RTL Support

Different language or a right-to-left layout! AlertifyJS got you covered. view example

AlertifyJS not only provides a replacement for default browser dialogs, it makes it super easy to create your own!


if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:[{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");

Run Example Documentation

Default Dialogs

AlertifyJS

Alert


alertify
  .alert("This is an alert dialog.", function(){
    alertify.message('OK');
  });

Run Example Documentation

AlertifyJS

Confirm

Cancel


alertify.confirm("This is a confirm dialog.",
  function(){
    alertify.success('Ok');
  },
  function(){
    alertify.error('Cancel');
  });

Run Example Documentation

AlertifyJS

Prompt

Default value

Cancel


alertify.prompt("This is a prompt dialog.", "Default value",
  function(evt, value ){
    alertify.success('Ok: ' + value);
  },
  function(){
    alertify.error('Cancel');
  })
  ;

Run Example Documentation

Default Notifications

AlertifyJS

Success


  // success notification
  // Shorthand for:
  // alertify.notify( message, 'success', [wait, callback]);
  alertify.success('Success message');

Run Example Documentation

AlertifyJS

Error


  // error notification
  // Shorthand for:
  // alertify.notify( message, 'error', [wait, callback]);
  alertify.error('Error message');

Run Example Documentation

AlertifyJS

Warning


  // warning notification
  // Shorthand for:
  // alertify.notify( message, 'warning', [wait, callback]);
  alertify.warning('Warning message');

Run Example Documentation

AlertifyJS

Message


  // default notification
  // Shorthand for:
  // alertify.notify( message, [type, wait, callback]);
  alertify.message('Normal message');

Run Example Documentation