Tiny Popup Notification System In jQuery - Toastr

Tiny Popup Notification System In jQuery - Toastr
File Size: 6.03 KB
Views Total: 338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another Android Toaster inspired notification system that shows messages in a popup box and disappears on its own after a while.

Comes with 4 notification types (Info, Success, Notice, and Danger) and uses CSS3 for performant slide in/out animations.

In addition, the plugin shows at the bottom of the notification box a slim progress bar which visualizes how much time is left before auto dismiss.

How to use it:

1. Link to jQuery, toastr.css and toastr.js as follows:

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

2. Attach the function toastr() to a container element in which the toast notifications will appear.

$(document).toastr({

});

3. Insert your own messages to the toast notification.

$(document).toastr({
  text_heading: 'Title',
  text_body: 'Message'
});

4. Determine the position of the toast notification:

  • left
  • center
  • right (default)
$(document).toastr({
  text_heading: 'Title',
  text_body: 'Message',
  align: 'left'
});

5. Specify the notification type:

  • info
  • success (default)
  • notice
  • danger
$(document).toastr({
  text_heading: 'Title',
  text_body: 'Message',
  align: 'left',
  status: 'notice'
});

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