Tiny Popup Notification System In jQuery - Toastr
File Size: | 6.03 KB |
---|---|
Views Total: | 808 |
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.