Tiny Popup Notification System In jQuery - Toastr

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.