Simple Lightweight JavaScript Notifications Solution

Category: Javascript , Notification | October 7, 2018
Views Total:690 views
Official Page:Go to website
Last Update:October 7, 2018


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