🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Notification alert toast-message growl-notification

Documentation

iao alert

Most flexible Jquery alert plugin with maximum number of customizations available.

Meta Data

Plugin Name: iao alert
Key: iao-alert
Version: 1.0.7
Author: Prashant Kapoor
Website: http://itsallonly.github.io/iao-alert
Repo: https://github.com/Itsallonly/iao-alert
Issues: https://github.com/Itsallonly/iao-alert/issues
Files: iao-alert.jquery.js, iao-alert.css
Dependency: Jquery

Use

Alert can be invoked in two ways:
1.$.iaoAlert({ msg: "This is demo iao alert message." });
2.$.fn.iaoAlert({msg: "This is demo iao alert message."});

Customization

4 type of alerts can be made:

  • 'success'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success" });
  • 'error'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "error" });
  • 'warning'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "warning" });
  • 'notification'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "notification" });

NOTE: The Default alert type is "notification"

2 modes of designs in iao alerts:

  • 'dark'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark" });
  • 'light'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "light" });

NOTE: The Default alert mode is "light"

Disable auto hide:

By default iao alert hide automatically after a few seconds to disable that use autoHide : false -
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: false });

Change alert display time:

By defalt iao alert display time is '3 seconds(3000 milliseconds)', it can be changed with 'alertTime' -
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000" });

Change alert fade out time:

By defalt iao alert fade out time is '500 milliseconds', it can be changed with 'fadeTime' -
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000" });

NOTE: If fadeTime is set to 0 then it fadeout effect will not be visible.

Remove Close button:

iao alert has close button in right to hide alert message on click, it can be disabled with 'closeButton: false'-
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false });

Close alert on click:

iao alert can be closed when clicked on it using 'closeOnClick: true', by default it is set to false-
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true });

Fade alert message on hover:

It appears nice to have a hover effect, it can be used in iao alert with 'fadeOnHover: true'-
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true });

Positioning

BY default iao alert message display on the top right corner of screen, it can be shown in 4 positions on screen

  • 'top-right'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "top-right" });
  • 'top-left'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "top-left" });
  • 'bottom-right'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "bottom-right" });
  • 'bottom-left'
    SYNTAX -
    $.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "bottom-left" });

Layering (z-index)

BY default iao alert message has the z-index value 999 i.e. standard to bring it to top, still if doesn't come on the top layer of screen custom z-index can be passed using zIndex
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "top-right", zIndex: "1000" });

Rounded Corners

BY default iao alert message has sharp corners, it can be made to have rounded corners by setting 'roundedCorners' to true
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "top-right", zIndex: "1000" });

Rounded Corners

BY default iao alert message don't use class attribute, a class can be added by setting 'alertClass' to any custom class
SYNTAX -
$.iaoAlert({ msg: "This is demo iao alert message.", type: "success", mode: "dark", autoHide: true, alertTime: "5000", fadeTime: "1000", closeButton: false, closeOnClick: true, fadeOnHover: true, position: "top-right", zIndex: "1000", alertClass: "alert-class" });


You May Also Like