Nice Clean jQuery Alert / Confirm Dialog Plugin - alertable.js

alertable.js is a very small (~2kb) jQuery plugin that lets you create nice, clean, animated, fullscreen alert, confirmation or prompt dialog popups to replace the native JavaScript popup boxes. Really simple to use and compatible with the Velocity.js animation library.

How to use it:

1. Add the following required files into your webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.alertable.js"></script>
<link href="jquery.alertable.css" rel="stylesheet">

2. Load the OPTIONAL Velocity.js library for more animations.

<script src='/path/to/velocity.min.js'></script>
<script src='/path/to/velocity.ui.min.js'></script>

3. The JavaScript to show a basic alert dialog.

$.alertable.alert('Alert Message');

4. The JavaScript to show a basic confirmation dialog with custom callbacks.

$.alertable.confirm('Are you sure?').then(function() {
  $.alertable.alert('You Just Clicked OK!');
}, function() {
  $.alertable.alert('You Just Clicked Cancel!');     
});

5. The JavaScript to show a basic prompt dialog.

$.alertable.prompt('How many?').then(function(data) {
  console.log('Prompt submitted', data);
}, function() {
  console.log('Prompt canceled');
});

6. Apply Velocity.js based JavaScript animations to the dialog.

$.alertable.alert('Alert Message!', {
  show: function() {
    $(this.overlay).velocity('transition.fadeIn');        
    $(this.modal).velocity('transition.flipBounceYIn');
  },
  hide: function() {
    $(this.overlay).velocity('transition.fadeOut');
    $(this.modal).velocity('transition.perspectiveUpOut');
  } 
});

7. Options and defaults.

// Preferences
container: 'body',
html: false,

// Templates
cancelButton: '<button class="alertable-cancel" type="button">Cancel</button>',
okButton: '<button class="alertable-ok" type="button">OK</button>',
overlay: '<div class="alertable-overlay"></div>',
modal:
    '<div class="alertable">' +
    '<div class="alertable-message"></div>' +
    '<div class="alertable-buttons"></div>' +
    '</div>',

// Hooks
hide: function() {
    $(this.modal).add(this.overlay).fadeOut(100);
},
show: function() {
    $(this.modal).add(this.overlay).fadeIn(100);
}

Change log:

2017-02-08

• Switch to 2sp indentation

2016-10-08

• CSS bugfix

2016-06-16

• Added prompt dialog support.

---

This awesome jQuery plugin is developed by claviska. For more Advanced Usages, please check the demo page or visit the official website.