Minimal Notification Popup In Pure JavaScript – notifications.js

Category: Javascript , Notification | March 13, 2018
Views Total:27,222 views
Official Page:Go to website
Last Update:March 13, 2018


Minimal Notification Popup In Pure JavaScript – notifications.js


notifications.js is a standalone JavaScript plugin to create beautiful, customizable, flexible notification popups inspired by the jQuery Toastr plugin.


  • 4 position: Top Right, Top Left, Bottom Right, and Bottom Left.
  • Auto dismisses after a timeout.
  • 5 themes: Success, Warning, Information, Error, and Default.

How to use it:

To get started, import the following JavaScript and CSS files into the document.

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

Create a new notification instance.

const myNotification = window.createNotification({
      // options here

Show the notification popup with your own message.

  title: 'Title',
  message: 'Notification Message' 

Possible options to customize the notification popup as per your needs.

  // close on click
  closeOnClick: true,
  // displays close button
  displayCloseButton: false,
  // nfc-top-left
  // nfc-bottom-right
  // nfc-bottom-left
  positionClass: 'nfc-top-right',
  // callback
  onclick: false,
  // timeout in milliseconds
  showDuration: 3500,
  // success, info, warning, error, and none
  theme: 'success'

You Might Be Interested In:

6 thoughts on “Minimal Notification Popup In Pure JavaScript – notifications.js

  1. thib

    Great and really easy to use!
    But there is some issues with the onclick and showDuration options.
    The showDuration is always the default value. And the onclick is called on notification creation.

  2. Tom

    Really good plugin. Easy to use and great example. Also really clean design which makes it just ‘plug & play’. Love your work

  3. SA007

    Couln’t find a neat way to ‘close’ a created notification from code, but you can close all notifications with:
    or a different position indicator.

  4. Explorer

    Just wanted to understand how to add hyperlink in the notification ‘message’


Leave a Reply