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

File Size: 95 KB
Views Total: 11253
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></script>
<link href="//" 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
  // 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:


  • Update jquery.msgPop.js


  • Fixed a compatibility issue with bootstrap


  • Bug fixes and performance updates


  • Update


  • Update jquery.msgPop.js


  • Demo fixed.


  • JS & stylesheet update.


  • 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.