Creating Growl Notifications with jQuery and Bootstrap - Notify.js
File Size: | 4.78 KB |
---|---|
Views Total: | 12304 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Notify.js is a lightweight jQuery plugin that takes advantage of Bootstrap's alert component to display various types of growl notifications in your web project.
Features:
- Easy to use.
- Fully styleable via CSS.
- Auto close after a specified time.
- Callback functions.
How to use it:
1. Load jQuery library and Bootstrap 3 framework in your web project.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
2. Load the notify.js jQuery plugin after jQuery library.
<script src="Notify.js"></script>
3. Create a container to place your notifications.
<div id="notifications"></div>
4. Basic usage:
// Notify((text, callback, close_callback, style)); Notify("Danger", null, null, 'danger'); Notify("Success", null, null, 'success'); Notify("Warning", null, null, 'warning); Notify("Info", null, null, 'info');
5. Add custom CSS to style & position these growl notifications.
#notifications { cursor: pointer; position: fixed; right: 0px; z-index: 9999; top: 0px; margin-top: 22px; margin-right: 15px; max-width: 400px; }
This awesome jQuery plugin is developed by msroot. For more Advanced Usages, please check the demo page or visit the official website.