Minimal Notification Popup In Pure JavaScript – notifications.js

Category: Javascript , Notification | March 13, 2018
6 Comments
Demo Download
Author: JamieLivingstone
Views Total: 15,952 views
Official Page: Go to website
Last Update: March 13, 2018
License: MIT

Preview:

Minimal Notification Popup In Pure JavaScript – notifications.js

Description:

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

Features:

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

myNotification({ 
  title: 'Title',
  message: 'Notification Message' 
});

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

myNotification({ 

  // 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'
  
});

See Also:

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.

    Reply ↓
    1. Geko

      What was the error? I’ve also onclick start on notification creation.

      Reply ↓
  3. Tom

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

    Reply ↓
  4. SA007

    Couln’t find a neat way to ‘close’ a created notification from code, but you can close all notifications with:
    document.body.removeChild(document.querySelector(`.nfc-bottom-right`));
    or a different position indicator.

    Reply ↓
  5. Explorer

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

    Reply ↓

Leave a Reply