Custom Animated Alert Popup Box Plugin - jQuery Alert 2

Alert 2 is a lightweight yet extensible and customizable jQuery alert popup plugin created as an awesome alternative to the native JavaScript alert() method.

Main features:

• Easy to use.
• Custom themes.
• Custom templates.
• Supprots HTML content.
• Custom action buttons.
• Configurable animations.
• Useful callbacks and API methods.

How to use it:

1. Import jQuery library and the jQuery Alert 2 plugin's JavaScript & Stylesheet into the html page.

<link href="jquery.alert2.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.alert2.js"></script>

2. Create a basic alert popup on the page.

$.alert("Hello World! <strong>I'm a basic alert popup</strong>");

3. Change the default light theme to dark.

$.alert("Hello World! <strong>I'm a dark alert popup</strong>", {
  theme: 'theme-dark'
});

4. Add an extra action button to the alert popup.

$.alert("Hello World! <strong>I'm a custom alert popup</strong>", {
  buttons: {
    close: 'Cancel',
    retry: 'Try again'
  }
});

5. Specify where the alert popup should be appended to.

$.alert("Hello World! <strong>I'm a custom alert popup</strong>", {
  parent: 'body'
});

6. The default templates for the alert popup.

$.alert("Hello World! <strong>I'm a custom alert popup</strong>", {
  templates: {
    button: '<a href="#" class="button"></a>',
    container: '<div class="jquery-alert"></div>',
    overlay: '<div class="alert-overlay"></div>',
    box: '<div class="alert-box"><div class="alert-message">{message}</div><div class="alert-buttons">{buttons}</div></div>'
  },
});

7. The default animations for the alert popup.

$.alert("Hello World! <strong>I'm a custom alert popup</strong>", {
  animations: {
    overlayIn: function(element) {
      element.fadeIn(350);
    },
    overlayOut: function(element) {
      element.fadeOut(350);
    },
    boxIn: function(element) {
      element.css('opacity', 0).show().animate({ opacity: 1, marginTop: '-=15' }, {
        duration: 200,
        easing: 'easeInOutQuad',
        complete: function() {
          var container = $('.jquery-alert'),
            options = container.data('options');
          options.callbacks.onOpen(element);
        }
      });
    },
    boxOut: function(element) {
      element.animate({ opacity: 0, marginTop: '+=15' }, {
        duration: 200,
        easing: 'easeInOutQuad',
        complete: function() {
          var container = $('.jquery-alert'),
            options = container.data('options');
          $(this).hide();
          options.callbacks.onClose(element);
        }
      });
    }
  }
});

8. The default callback functions.

$.alert("Hello World! <strong>I'm a custom alert popup</strong>", {
  callbacks: {
    createMessage: function(message, text) {
      message.html(text);
    },
    createButton: function(button, text, name) {
      button.text(text);
    },
    onOpen: $.noop,
    onClose: $.noop,
    onButton: function() {
      $.alert.api.close();
    },
    onKey: function(key) {
      switch (key) {
        case 'Escape':
        case 'Enter':
        case ' ':
          $.alert.api.button('close');
        break;
      }
    }
  }
});

9. Available API methods.

// shows an alert popup
$.alert.api.show("Alert Message");

// closes the alert popup
$.alert.api.close();

// triggers a click for the specified button
$.alert.api.button('close');

---

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