Feature-rich Sliding Popup Notification Plugin - jQuery Msg Popup

Msg Popup is a full-featured notification jQuery plugin to create highly customizable, growl- or toast-like popup messages sliding out from the edge of the screen when triggered.

Features:

• Supports both text & HTML content.
• 5 predefined themes: normal, success, error, info, and alert.
• Or create your own themes using CSS.
• Auto dismiss or not.
• Auto scrolls the page to the bottom when new messages are activated.

How to use it:

1. To begin with, insert jQuery JavaScript library and the Msg Popup plugin's files into the document.

<link rel="stylesheet" href="/path/to/dist/jquery-msgpopup.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery-msgpopup.js"></script>

2. The JavaScript syntax to create basic popup messages.

// default
$().msgpopup({
  text: 'Default Popup Message',
});

// success
$().msgpopup({
  text: 'Success Popup Message',
  type: 'success'
});

// error
$().msgpopup({
  text: 'Error Popup Message',
  type: 'error'
});

// alert
$().msgpopup({
  text: 'Alert Popup Message',
  type: 'alert'
});

// info
$().msgpopup({
  text: 'Info Popup Message',
  type: 'info'
});

3. Or insert custom HTML content to the popup message.

var customHtml = '\
    <div class="example-box">\
      Custom Message Here\
    </div>';

$().msgpopup({
  text: customHtml,
  custom: true
});

4. More options to customize the popup message.

$().msgpopup({

  // auto dismiss after 5 seconds
  // setting to FALSE will disable the option
  time: 5000,

  // additional CSS class(es)
  class: '',

  // shows close button
  x: true,

  // removes message container on close
  removeContainerOnClose: false,

  // checks if has messages before removing the container
  containerCheckItemBeforeRemove: true,

  // assigns a unique ID to the message
  id: false,

  // auto scrolls to the bottom when there're new messages
  scrollToBottomOnNewMessage: true,

  // where the popup message should be appended to
  appendTo: 'body'
  
});

5. Available callback functions.

$().msgpopup({

  closeFunc: true,
  mouseoverFunc: false,
  mouseoutFunc: false,
  beforeShowFunc: false,
  afterShowFunc: false,
  clickFunc: false,
  beforeRemoveFunc: false,
  afterRemoveFunc: false,
  
});

6. Override the default CSS classes if needed.

$().msgpopup({

  themeClass: 'msgpopup-theme-default',
  defaultTypeClass: 'msgpopup-type',
  wrapVisibleClass: 'msgpopup-wrap-visible',
  elToCloneData: 'data-msgpopup-to-clone',
  containerData: 'data-msgpopup-container',
  containerClass: 'msgpopup-container',
  boxContentData: 'data-msgpopup-content',
  boxContentClass: 'msgpopup-content',
  boxTextData: 'data-msgpopup-text',
  boxTextClass: 'msgpopup-text',
  boxCloneOutputData: 'data-msgpopup-box-clone-output',
  boxCloneOutputClass: 'msgpopup-box-clone-output',
  wrapData: 'data-msgpopup-wrap',
  wrapClass: 'msgpopup-wrap',
  itemData: 'data-msgpopup-item',
  itemClass: 'msgpopup-item',
  boxData: 'data-msgpopup-box',
  boxClass: 'msgpopup-box'

});

---

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