This time I will share jQuery Plugin and tutorial about Lightweight Top Notification Bar Plugin – jQuery Topper.js, hope it will help you in programming stack.
Topper.js is a minimal clean jQuery notification bar plugin which displays a customizable, dismissable, full-width alert message on the top of the page.
How to use it:
1. Load jQuery library and the Topper.js plugin’s files in the HTML.
1 |
< link rel = "stylesheet" href = "src/topper.css" > |
3 |
integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin = "anonymous" > |
6 |
< script src = "src/topper.js" ></ script > |
2. Create a Sticky top notification bar that will always be visible until the user clicks on the close button.
3 |
text: 'This is my sample notification.' , |
3. Create a toast-like top notification bar that will automatically dismiss after a timeout you specify.
3 |
text: 'This is my sample notification.' , |
4. The plugin currently comes with 4 themes:
- success
- info
- warning
- danger
3 |
text: 'This is my sample notification.' , |
5. Create your own theme in the CSS:
3 |
text: 'This is my sample notification.' , |
This awesome jQuery plugin is developed by sidvanvliet. For more Advanced Usages, please check the demo page or visit the official website.