Minimal Notification Popup In Pure JavaScript – notifications.js

Category: Javascript , Notification | March 13, 2018
Author: JamieLivingstone
Views Total: 3,771
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'
  
});

You Might Be Interested In:


2 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

Leave a Reply