Elegant Notification Popup Library – spop

Category: Javascript , Notification | January 2, 2018
Views Total:437 views
Official Page:Go to website
Last Update:January 2, 2018


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.


  • 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.

  // 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() { }

You Might Be Interested In:

Leave a Reply