Growl-like Toast Notification Plugin with jQuery and Font Awesome - MsgPop

MsgPop is an easy jQuery plugin used to show growl like animated toast messages on your web page. Font awesome 4 is required for the icons next to your notifications.

Features:

• Lightweight and easy to implement.
• Custom positions.
• 2 display mode: small (growl like) or large (full width notification bar)
• 3 message types: message, error and warning.
• Auto close or click to close.
• Lots of customization options.
• Callback functions supported.

How to use it:

1. Load the necessary jQuery library and Font Awesome 4.2 in your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2. Include the jQuery MsgPop plugin's script and stylesheet in the document.

<link rel="stylesheet" href="css/msgPop.css">
<script src="js/jquery.msgPop.js"></script>

3. Initialize the plugin to pop up a toast notification when the page loads.

// Set to true to use full width mode
MsgPop.displaySmall = false;

// Custom the postion
MsgPop.position = "top-right";

// Call the plugin
$(document).ready(function(){
  MsgPop.open({
  // Options
  Type:  "success",
  Content:"Welcome to MsgPop!"});
});

4. Options and defaults.

• Type: "message": (message : success : error)
• AutoClose: true: (force : auto) -- force: user will have to click to close
• CloseTimer: 7000:  only applies to auto. Sets the timer in milliseconds before box closes
• ClickAnyClose: true: (true : false) -- true: user clicks anywhere on message to close -- false: user must click "X" to close
• HideCloseBtn: false: (true : false) -- show / hide close button
• BeforeOpen: function () { }: Fires when the message has fully opened
• AfterOpen: function () { }: Fires when the message begins opening
• BeforeClose: null: Fires when the message begins to close
• AfterClose: null: Fires when the message has closed
• ShowIcon: true: Show / Hide icon next to message 
• MsgID: msgPopMessageID: Sets message ID for this specific call
• CssClass: "": Adds additional css classes to the message

Change logs:

2015-06-04

• Update jquery.msgPop.js

2014-11-06

• Fixed a compatibility issue with bootstrap

2014-10-12

• Bug fixes and performance updates

2014-10-11

• Update

2014-10-10

• Update jquery.msgPop.js

2014-10-08

• Demo fixed.

2014-10-07

• JS & stylesheet update.

2014-10-06

• Fixed major bugs
• Force full width messages on mobile devices.

---

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