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

Growl-like Toast Notification Plugin with jQuery and Font Awesome - MsgPop
File Size: 95 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.