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.
