Efficient Notification Popup Plugin For jQuery - easy-alert-js

Just another jQuery plugin used to provide animated, customizable alerts and messages for your web applications with multiple options and callbacks.

Main features:

• Supports both vertical and horizontal positions.
• Custom animations based on jQuery UI library.
• 4 built-in notification types: warning,info,danger,success.
• Allows to auto hide after a timeout you specify.
• Complete/clicked/hidden callback functions.

How to use it:

1. Load the needed jQuery library and the jQuery easy-alert-js plugin's files in your html document.

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

2. Load the OPTIONAL jQuery UI library for additional animations.

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

3. Display a notification popup on the webpage:

• optionsOrMessage: options and notification message
• alertType: warning,info,danger,success or 'custom'
• position: custom position

$.easyAlert(optionsOrMessage,alertType,position);

4. All default plugin options. You can override them for your own purpose.

$.easyAlert({
  'message': "Easy alert-js By Ali Dalal",
  'alertType': 'success',
  'position': "b r",
  globalMinWidth: '250px',
  clickToHide: true,
  autoHide: false,
  time: 5000,
  showAnimation: 'fade',
  showDuration: 300,
  hideAnimation: 'fade',
  hideDuration: 300,
  globalSpace: 5
});

5. Create a custom type for the notification popup.

.alert-custom {
  ...
}

$.easyAlert('This is a custom alert','custom');

6. Callback functions available.

$.easyAlert({

  // when complete
  complete: null,

  // when clicked
  clicked: null,

  // when hidden
  hidden: null
  
});

---

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