Stacked Bootstrap 5 Toast Notification Plugin - jQuery stackAlert

stackAlert.js is a lightweight jQuery alert notification plugin that helps you create stacked, 'Temporary' or 'Sticky' toast messages using Bootstrap 5's alert classes and utilities.

The plugin automatically injects the necessary CSS styles and manages the positioning logic, so you can focus on your app logic rather than notification mechanics.

Features:

• Font Awesome icons: Automatic icon mapping for different notification types.
• Flexible positioning: Six position options including center alignments.
• Auto-dismissal control: Configurable timeout or manual-only closing.
• Vertical stacking: Non-overlapping alerts that stack cleanly.
• Responsive design: Works across different screen sizes and devices.

How to use it:

1. Load the necessary jQuery, Bootstrap 5 (CSS and JS), Font Awesome, and stackAlert plugin in your HTML. A CDN is fine for quick setups, but for production, I’d recommend managing these with npm or yarn.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link href="/path/to/cdn/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/all.min.css">

<!-- stackAlert Plugin -->
<script src="/path/to/stackAlert.min.js"></script>

2. You can call the plugin directly on the jQuery object. You have two ways to pass the options: as a single configuration object or as separate arguments. I prefer the object approach as it's more readable.

$.fn.stackAlert({
  message: 'Success Alert',
  type: 'success',
  timeout: 5000,
  position: 'top-right',
});

// OR
$.fn.stackAlert('Success Alert', 'success', 5000, 'top-right');

3. For a permanent error message that the user must close manually, set the timeout to 0.

$.fn.stackAlert({
  message: 'Success Alert',
  type: 'success',
  timeout: 0,
  position: 'top-right'
});

// OR
$.fn.stackAlert('Success Alert', 'success', 0, 'top-right')

4. All default configuration options:

• message: (string) The text to display.
• type: (string) The Bootstrap alert type. Affects color and icon. Accepts info, success, danger, warning, primary, secondary, light, dark.
• timeout: (number) Milliseconds before the alert auto-closes. Set to 0 for a permanent alert.
• position: (string) Where to display the alerts. Accepts top-right, top-center, top-left, bottom-right, bottom-center, bottom-left. 

$.fn.stackAlert({
  message: 'Alert Message',
  type: 'secondary',
  timeout: 5000,
  position: 'top-right'
});

5. API methods:

• $.fn.stackAlert.closeAll(): Closes all alerts on the page, regardless of position.
• $.fn.stackAlert.closePosition('top-right'): Closes all alerts for a specific position.

6. Default Font Awesome icons:

const icons = {
  info: 'fa-circle-info',
  success: 'fa-circle-check',
  warning: 'fa-triangle-exclamation',
  danger: 'fa-circle-exclamation',
  primary: 'fa-star',
  secondary: 'fa-circle',
  light: 'fa-sun',
  dark: 'fa-moon'
};

FAQs

Q: Can I use custom icons instead of the default Font Awesome ones?

A: Not directly through the configuration options. The icon-to-type mapping is hardcoded inside the plugin's icons object. To use your own, you would need to modify that object to use your own CSS classes.

Q: How do I run a function after an alert is closed?

A: The plugin itself doesn't provide an onClose callback. But since it uses standard Bootstrap components, you can hook into Bootstrap's own events. Just attach an event listener to one of the positional containers and listen for the closed.bs.alert event.

// Listen for any alert closing in the bottom-right container
$('#alert-stack-bottom-right').on('closed.bs.alert', '.alert', function () {
  console.log('An alert was just closed!');
});

Q: What happens if I call multiple alerts for the same position in quick succession?

A: They will stack vertically in the order they were called. The plugin appends each new alert into the shared positional container, and the browser renders them one after another.

See Also:

• 10 Best Toast Notification jQuery/JavaScript Plugins
• Browser All Bootstrap 5 Components and Plugins

---

This awesome jQuery plugin is developed by FVLogika. For more Advanced Usages, please check the demo page or visit the official website.