Bootstrap Based Flash Message Plugin With jQuery

A jQuery/Bootstrap plugin which lets you create highly customizable flash messages using Bootstrap's Alerts component. Supports both Bootstrap 3 and 4.

Features:

• Auto dismiss with a timer.
• Custom alert types, icons, animations, positions, etc.
• Callback functions.

How to use it:

1. Load the necessary jQuery library and Bootstrap framework in the html page.

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

2. Place the Bootstrap Flash Alert plugin's script after JQuery.

<script src="bootstrap-flash-alert.js"></script>

3. The simplest way to show a basic flash message on the webpage.

$.alert("Alert Message", "Alert Title")

4. Create a custom flash message by passing in the following options to the $.alert:

$ .alert("Alert Message," {

  // auto close
  autoClose: true,  

  // auto close time
  closeTime: 5000,   

  // with timer
  withTime: false, 

  // Alert type
  type: 'danger',

  // Position, the first position, followed by offset, if it is between 1 and -1 percentage
  position: ['center', [-0.42, 0]], 

  // Alert title
  title: false, // title

  // Alert icons
  // e.g. icon:'glyphicon glyphicon-heart'
  icon: false ,

  // Close event
  close: '',   

  // Animation speed
  speed: 'normal', 

  // If there is only one
  isOnly: true, 

  // Minimum Top position
  minTop: 10, 

  // Animation options
  animation: false,
  animShow: 'fadeIn',
  animHide: 'fadeOut',

  // callbacks
  onShow: function () {
  },  
  onClose: function () {
  }  
  
})

---

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