Non-blocking Message Notification Plugin - jQuery Toastr

Non-blocking Message Notification Plugin - jQuery Toastr

Just another jQuery notification plugin to display informational/alert messages in toast-like, non-blocking, and highly customizable notification popups.

More features:

  • Auto close after a specific timeout.
  • Custom position.
  • 3 sizes: large, small, extra small.
  • 4 notification types: success, info, warning, and error.
  • Perform an action when the notification is closed.

How to use it:

1. Insert jQuery library and the minified version of the jQuery Toastr plugin into the html document.

<link rel="stylesheet" href="css/toastr.min.css">
<script src="" 
<script src="js/toastr.min.js"></script>

2. Initialize the jQuery Toastr plugin create toast messages using the following JS syntax.

$.toastr.success('Success Message');
$'Info  Message');
$.toastr.warning('Warning  Message');
$.toastr.error('Error  Message');

3. Config the toast messages by passing the options object as the second parameter:

$.toastr.success('Success Message', {
  // timeout in milliseconds
  time: 3000,
  // 'top-left', 'top-center', 'top-right', 'right-bottom', 'bottom-center', 'left-bottom'
  position: 'top-right', 
  // 'lg', 'sm', 'xs'
  size: '', 
  // callback
  callback: function () {}

4. You can also set the options globally:

  time: 5000,
  // more options here

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

  • Publication date: 27.08.2018
  • Source