Minimal Notification Popup In Pure JavaScript – notifications.js

Preview:

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