Bootstrap 5 Alerts Manipulation Plugin In jQuery - BsAlert

Bootstrap 5 Alerts Manipulation Plugin In jQuery - BsAlert
File Size: 10.1 KB
Views Total: 109
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

BsAlert is a jQuery plugin to create and manipulate alert messages using the Bootstrap 5's Alerts component.

How to use it:

1. Load the required jQuery library and Bootstrap 5 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download and load the BsAlert plugin.

<script src="./js/jquery.bs.alert.min.js"></script>

3. Create a container to hold the alert messages.

<div id="alert-wrapper"></div>

4. Initialize the plugin on the wrapper element and create a Bootstrap alert as follows:

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
});

5. Set the alert type:

  • primary
  • secondary
  • success
  • danger
  • warning (default)
  • info
  • light
  • dark
$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  type: 'success',
});

6. Determine whether to allow the users to dismiss the alert messages. Default: true.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  fadeout: true,
  duration: 5, // auto dismiss after 5 seconds
});;

7. Determine whether to auto dismiss the alert message. Default: true.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  stack: true,
});;

8. Add custom icons to the alert messages.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  icon: 'icon class(es) here',
});

9. Add custom icons to the alert messages.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  icon: 'bi bi-exclamation-lg',
});

10. Remove all active alert messages.

$('#alert-wrapper').bsAlert('remove');

11. Callback functions.

$('#alert-wrapper').bsAlert({
  heading: 'Alert Title',
  content: 'Alert Message. <a href="">HTML Is Supported As Well</a>.',
  onShow: function() {},
  onDismiss: function() {},
});

12. Remove all visible alerts.

$('#alert-wrapper').bsAlert('remove');

Changelog:

2021-11-28

  • Plugin is stored in the element's data

2021-11-24

  • no longer conflicting with shared method names

2021-11-23

  • Bugfix

2021-11-23

  • Code refactor

2021-11-21

  • Added duration param.

2021-11-20

  • Changed BsAlert to bsAlert

2021-11-19

  • Removed prepend option

2021-11-17

  • Removed useless code

2021-11-17

  • Fixed onDismiss call for remove()

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