Elegant Notification Popup Library – spop

spop is a small, elegant, customizable JavaScript notification library which makes it possible to create various types of notification popups on the web app.

Features:

• 4 built-in styles: default, success, warning, error.
• Auto dismisses after a timeout just like the Android toaster.
• 6 positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
• Grouped notifications.
• Open and close callback functions.
• Supports HTML content.

Basic usage:

Import the spop’s files into the html file.

<link href="dist/spop.css" rel="stylesheet">
<script src="dist/spop.js"></script>

Create the notification popups as these:

spop('<strong>Warning pop</strong>');
spop('<strong>Success pop</strong>', 'success');
spop('<strong>Warning pop</strong>', 'warning');
spop('<strong>Error popup</strong>', 'error');

Customize the notification popups using the following options.

spop({
  // template string
  template  : null,
  // or success, warning or error
  style     : 'info',
  // auto close after the timeout
  autoclose : false,
  // or top-left top-center bottom-left bottom-center bottom-right
  position  : 'top-right',
  // shows icons
  icon      : true,
  // string, add a id reference
  group     : false,
  // callbacks
  onOpen    : funtion() { },
  onClose   : funtion() { }
  
});