Custom Alert Notification Plugin For jQuery - iao-alert

iao-alert is a lightweight, flexible, customizable jQuery plugin for creating animated, toast- or growl style alert notifications on the webpage.

Main features:

• 2 themes: light and dark.
• 4 notification types: success, error, warning and default.
• Fade in/out animations.
• Fade out notification on hover.
• Auto dismiss after a timeout (default: 3 seconds).
• Close button.
• Can be positioned anywhere on the webpage.

Basic usage:

1. To use the jQuery iao-alert plugin start with adding the following JS and CSS files in your html document.

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

2. The JavaScript to create a default ioa alert message:

$.iaoAlert({
  msg: "This is default iao alert message."
})

3. Set the notification type.

$.iaoAlert({

  // or success, error, warning
  type: "notification"

})

4. Enable / disable auto dismiss.

$.iaoAlert({

  // false = close auto-dismiss
  autoHide: true,

  // timeout in milliseconds
  alertTime: "3000",

})

5. Change the default position where you'd like to place the alert notifications.

$.iaoAlert({

  // or top-left, bottom-right, bottom-left
  position: 'top-right'

})

6. More configuration options with default values.

$.iaoAlert({

  // default message
  msg: "This is default iao alert message.",

  // or 'success', 'error', 'warning'
  type: "notification",

  // or dark
  mode: "light",

  // auto hide
  autoHide: true,

  // timeout in milliseconds
  alertTime: "3000",

  // fade animation speed
  fadeTime: "500",

  // shows close button
  closeButton: true,

  // close on click
  closeOnClick: false,

  // custom position
  position: 'top-right',

  // fade on hover
  fadeOnHover: true,

  // rounded corners
  roundedCorner: false,

  // z-index
  zIndex: '999',

  // additional CSS class(es)
  alertClass: ''

})

Changelog:

2019-11-22

• Added more options

2017-07-20

• Adding custom class functionality

2017-05-10

• Correction in the rounded Corner bug

2017-03-27

• adding zIndex option control.

---

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