Elegant Notification Popup Library – spop

Category: Javascript , Notification | January 2, 2018
Author: silvio-r
Views Total: 326 views
Official Page: Go to website
Last Update: January 2, 2018
License: MIT

Preview:

Elegant Notification Popup Library – spop

Description:

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

You Might Be Interested In:


Leave a Reply