Lightweight Top Notification Bar Plugin - jQuery Topper.js

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.