Lightweight Top Notification Bar Plugin - jQuery Topper.js
File Size: | 7.3 KB |
---|---|
Views Total: | 2875 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<link rel="stylesheet" href="src/topper.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <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.
Topper({ title: 'My Alert', text: 'This is my sample notification.', style: 'danger', type: 'top', autoclose: false });
3. Create a toast-like top notification bar that will automatically dismiss after a timeout you specify.
Topper({ title: 'My Alert', text: 'This is my sample notification.', style: 'danger', type: 'top', autoclose: true, autocloseAfter: 3000 });
4. The plugin currently comes with 4 themes:
- success
- info
- warning
- danger
Topper({ title: 'My Alert', text: 'This is my sample notification.', style: 'info', type: 'top', autoclose: false });
5. Create your own theme in the CSS:
.topper-custom { /* styles here */ }
Topper({ title: 'My Alert', text: 'This is my sample notification.', style: 'custom', type: 'top', autoclose: false });
This awesome jQuery plugin is developed by sidvanvliet. For more Advanced Usages, please check the demo page or visit the official website.