Simple Responsive Alert- and Growl-style Notification Plugin For JavaScript – notie.js

Preview:

Description:

notie.js is a pure JavaScript library that makes it easy to create responsive, flat styled notification popups and dialog boxes with different types on the webpage.

Basic usage:

Download and load the notie.js JavaScript file into the html document.

<script src="notie.js"></script>

Create a ‘Success’ notification that will auto dismiss after 2 seconds.

notie.alert(1, 'Success!', 2);

Create a ‘Warning’ notification that will auto dismiss after 3 seconds.

notie.alert(2, 'Success!', 3);

Create an ‘Error’ notification that will auto dismiss after 5 seconds.

notie.alert(3, 'Success!', 5);

Create an ‘Information’ notification that will auto dismiss after 10 seconds.

notie.alert(4, 'Success!', 10);

Create a confirm dialog with yes / no buttons and custom callback function.

notie.confirm('Are you sure?', 'Yes', 'Cancel', function() {
  notie.alert(1, 'Good choice!', 2);
});

All possible options to customize the plugin.

notie.setOptions({
  alertTime: 3,
  dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  overlayClickDismiss: true,
  overlayOpacity: 0.75,
  transitionCurve: 'ease',
  transitionDuration: 0.3,
  transitionSelector: 'all',
  classes: {
    container: 'notie-container',
    textbox: 'notie-textbox',
    textboxInner: 'notie-textbox-inner',
    button: 'notie-button',
    element: 'notie-element',
    elementHalf: 'notie-element-half',
    elementThird: 'notie-element-third',
    overlay: 'notie-overlay',
    backgroundSuccess: 'notie-background-success',
    backgroundWarning: 'notie-background-warning',
    backgroundError: 'notie-background-error',
    backgroundInfo: 'notie-background-info',
    backgroundNeutral: 'notie-background-neutral',
    backgroundOverlay: 'notie-background-overlay',
    alert: 'notie-alert',
    inputField: 'notie-input-field',
    selectChoiceRepeated: 'notie-select-choice-repeated',
    dateSelectorInner: 'notie-date-selector-inner',
    dateSelectorUp: 'notie-date-selector-up'
  },
  ids: {
    overlay: 'notie-overlay'
  },
  positions: {
    alert: positions.top,
    force: positions.top,
    confirm: positions.top,
    input: positions.top,
    select: positions.bottom,
    date: positions.top
  }
})

Changelog:

v4.3.1 (08/03/2018)

• Update