Notification

Popup notifications is a lightweight Javascript library for popup messages on a web page. Pure javascript and css, any dependencies. You can use it as toast messages or a single notification.

Live Demo

Click here

Getting Started

Just include files in the HTML:

<link href="path/to/notification.css" rel="stylesheet"/>
<script src="path/to/notification.js"></script>

Or use it as an ES module in your project:

import Notification from 'path/to/notification-es.js';

options

All options are optional

• position
  top-right (default value)
  bottom-right
  top-left
  bottom-left
  center
• duration
  default 5000
  time in milliseconds the notification will be displayed
  if duration is 0 - popup notification will be displayed all the time
• isHidePrev
  default false
  hide previous popup(s) or not
• isHideTitle
  default false
  hide title block or not
  if it is set to true and the duration is 0,
  an X close button will appear on the right side of the notification body to allow the popup to close.
• maxOpened
  default 5, the maximum value can be set to 10

Usage

const popup = Notification({
  position: 'top-left',
  duration: 4000,
  isHidePrev: false,
  isHideTitle: false,
  maxOpened: 3,
});

// or
const popup = Notification(); // options will be set by default

// then later you can set any options like
popup.setProperty({
  duration: 5000,
  isHidePrev: true,
});

the following popup methods are available:

• error
• warning
• info
• success
• dialog
• setProperty
• hide

// error
popup.error({
  title: 'Oops',
  message: `An error has occurred"`,
});

// or even insert HTML
popup.error({
  title: `<div class="title-cust title-error">Oops</div>`,
  message: `<div class="wrapper-notification">
    <div class="icons icon-error"></div>
    <div class="message message-text-error">An error has occurred</div></div>`,
});

// info
popup.info({
  title: 'Info',
  message: 'Info message'
});

// warning
popup.warning({
  title: 'Warning',
  message: 'Warning message'
});

// success
popup.success({
  title: 'Success',
  message: 'Success message'
});

Dialog

If use "Confirmation dialog" two buttons are available [Ok] and [Cancel].
The popup display time here will not matter even if it has been set,
callback function is called when any of the buttons is pressed.
You can also insert HTML.

popup.dialog({
  title: 'Confirm',
  message: 'Confirm message',
  callback: (result) => {
    console.log('result = ', result)
  }
});

/*
  Example with HTML
  you can pass a validation function to be able to check the filled fields in the form and
  not to close the popup immediately after clicking [Ok]
*/
const validTextarea = () => {
  let valid = true;
  const textarea = document.querySelector('textarea[name="your_mess"]');
  if (textarea.value.trim() === '') {
    valid = false;
    textarea.focus();
  }
  return valid;
};

popup.dialog({
  title: <div class="title-cust title-dialog">Send</div>',
  message: `<div class="label-message">Your message<span class="asterisk">*</span>:</div>
    <textarea name="your_mess" rows="3"></textarea>`,
  callback:(result) => {
    console.log('result = ', result)
  },
  validFunc: validTextarea,
});

Authors

👤 Helen Nikitina

• Twitter: @twitterhandle

License