Elegant Toast Notification Library For jQuery - Notify

Elegant Toast Notification Library For jQuery - Notify

Notify is a small jQuery notification plugin used to create Material Toast like notification messages sliding in/out from the edge of your screen.

Key features:

  • success, info, error, warn notification types.
  • Auto dismisses after a timeout, with a countdown bar.
  • LTR and RTL support.
  • Open/close callbacks.
  • Customize the position of the notification.

How to use it:

1. Link to jQuery library and the Notify plugin's files as follows:

<link href="dist/jquery.notify.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="dist/jquery.notify.js"></script>

2. Create a default toast notification on the webpage. This toast notification will auto dismiss after 4 seconds.


3. All possible options which let you create your own toast notifications.

  // where to append the toast notification
  wrapper: 'body',
  // toast message
  message: 'Your request submitted successfuly!',
  // success, info, error, warn
  type: 'success',
  // 1: top-left, 2: top-center, 3: top-right
  // 4: mid-left, 5: mid-right
  // 6: bottom-left, 7: bottom-center, 8: bottom-right
  position: 1,
  // or 'rtl'
  dir: 'ltr',
  // enable/disable auto close
  autoClose: true,
  // timeout in milliseconds
  duration: 4000

4. Perform actions when the toast notification opens/closes.

  onOpen: null, // function
  onClose: null // function

This awesome jQuery plugin is developed by digitalify. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 27.09.2018
  • Source