Javascript Message Pop Notification Library | MsgPop

js-message-notification-library

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.