Growl-like Toast Notification Plugin with jQuery and Font Awesome - MsgPop
File Size: | 95 KB |
---|---|
Views Total: | 11204 |
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 closeCloseTimer: 7000
: only applies to auto. Sets the timer in milliseconds before box closesClickAnyClose: true
: (true : false) -- true: user clicks anywhere on message to close -- false: user must click "X" to closeHideCloseBtn: false
: (true : false) -- show / hide close buttonBeforeOpen: function () { }
: Fires when the message has fully openedAfterOpen: function () { }
: Fires when the message begins openingBeforeClose: null
: Fires when the message begins to closeAfterClose: null
: Fires when the message has closedShowIcon: true
: Show / Hide icon next to messageMsgID: msgPopMessageID
: Sets message ID for this specific callCssClass: ""
: 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.