MsgPop Message pop is a free plugin written in pure JavaScript and enhancing FontAwesome to create an easy-to-use and clean messaging system.
js notification library, what is push notification how it works, jquery notification message example, js notification popup, notification js example
How to make use of it:
1. Include MsgPop files with the iconic Font Awesome font on a web page.
// CSS Files <link href="/path/to/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/msgPop.css"> // JS Files <script src="js/msgPop.js"></script>
2. JavaScript to show a basic notification message “Success” on the screen.
MsgPop.open({
Type:"success",
Content:"Your content here!"
});3. General Settings.
// toggle full screen messages or small MsgPop.displaySmall = true; // "top-left", "top-right", "bottom-left" or "bottom-right" MsgPop.position = "top-right"; // number of messages to display before showing the "Load More" button MsgPop.limit = 4 // number of milliseconds all animated effects take to complete effectSpeed = 350
4. Message settings and callback functions.
MsgPop.open({
// (message : success : error : warning)
Type: "message",
// (force : auto) -- force: user will have to click to close
AutoClose: true,
// only applies to auto. Sets the timer in milliseconds before box closes
CloseTimer: 7000,
// (true : false) -- true: user clicks anywhere on message to close -- false: user must click "X" to close
ClickAnyClose: true,
// (true : false) -- show / hide close button
HideCloseBtn: false,
// Fires when the message has fully opened
BeforeOpen: null,
// Fires when the message begins opening
AfterOpen: null,
// Fires when the message begins to close
BeforeClose: null,
// Fires when the message has closed
AfterClose: null,
// Show / Hide icon next to message
ShowIcon: true,
// Sets message ID for this specific call
MsgID: msgPopMessageID,
// Adds additional css classes to the message
CssClass: "",
// Default Icon
Icon: null
});Feature-rich Growl Notification Library, MsgPop Plugin/Github, push notification example
See Demo And Download
Official Website(analogSanity): Click Here
This superior jQuery/javascript plugin is developed by analogSanity. For extra Advanced usage, please go to the official website.