Most flexible Jquery alert plugin with maximum number of customizations available.
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
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."});
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "success"
});
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "error"
});
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "warning"
});
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "notification"
});
NOTE: The Default alert type is “notification”
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "success",
mode: "dark"
});
$.iaoAlert({
msg: "This is demo iao alert message.",
type: "success",
mode: "light"
});
NOTE: The Default alert mode is “light”
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
});
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"
});
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.
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
});
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
});
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
});
BY default iao alert message display on the top right corner of screen, it can be shown in 4 positions on screen
$.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"
});
$.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"
});
$.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"
});
$.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"
});
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"
});
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"
});
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"
});