Simple Lightweight JavaScript Notifications Solution

Category: Javascript , Notification | October 7, 2018
Author: pehaa
Views Total: 591 views
Official Page: Go to website
Last Update: October 7, 2018
License: MIT


Simple Lightweight JavaScript Notifications Solution


A lightweight, simple-to-use JavaScript plugin to create temporary or permanent notification messages sliding out from the right side of the webpage.

How to use it:

Install & download  the library with NPM:

$ npm install simple-notifications-solution --save

Import the necessary JavaScript and CSS files into the page.

<link rel="stylesheet" href="/path/to/Notifications.css">
<script src="/path/to/Notifications.js"></script>

Create a new notifications object and initialize the notification library.

var notifications = new Notifications(".notification");

Create a permanent notification message that will always stay on the screen until you click the close button.

<p class="notification">
  This is a notification
  <button class="delete" type="button">Close</button>

Create a toast-like temporary notification message that will auto dismiss itself after a timeout.

<p class="notification" data-close="self">
  This is a toast notification

Default options to customize the notification messages.


  // animation
  animationInName: 'slidein',
  animationOutSelf: 'slideout 1s',
  animationOutClose: 'fadeout 1s',

  // selector of close button
  closeButtonSelector: '.delete',

  // click to close
  closeSelfOnClick: true,

  // start top position
  startTopPosition: 8,

  // space between messages
  gap: 8,

  // delay in milliseconds
  delayFunction: function delayFunction(i) {
      return 3 + 2 * i;

  // top transition
  topTransition: 'top .75s ease-in-out'



  • add startTopPosition option

You Might Be Interested In:

One thought on “Simple Lightweight JavaScript Notifications Solution

  1. Seongnoh Yi

    How to style it? Could you show simple CSS style for notifications?


Leave a Reply