Customizable Bootstrap Alert Plugin With jQuery - errorBox

Customizable Bootstrap Alert Plugin With jQuery - errorBox
File Size: 3.64 KB
Views Total: 515
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

errorBox is a really small jQuery plugin used to create flexible, animated, customizable, dismissable alert messages using Bootstrap styles.

More features:

  • Glyphicons are supported.
  • Auto dismiss after a specific timeout.
  • Supports html content.
  • Supports 4 alert types: success, info, warning and danger.

How to use it:

1. To use this plugin, you need to load both jQuery and Bootstrap in the webpage.

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

2. Load the jQuery UI library for more easing effects.

<script src="jquery-ui.min.js"></script>

3. Load the jQuery errorBox plugin's script after jQuery library.

<script src="errorBox.jquery.js"></script>

4. Create a new errBox instance and define your content to be displayed in the alert box.

errBox({        
  message: "Test message
});

5. Config the alert box using the following settings as per your needs.

errBox({        

  // success, info, warning and danger
  type: "danger",
  
  // is dismissable?
  close: true,

  // timeout in ms
  timer: 3000,

  // x/y offsets
  offsetX: 20,
  offsetY: 20,

  // opacity
  hoverOpacity: 0.6

  // width
  width: 60,

  // glyphicon
  glyphicon: "apple"
  
});

Change log:

2017-05-15

  • v2.2: titleMode / offsetX & Y / hoverOpacity

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