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

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

README.md

Notification