CSS3 Animated Alert Plugin With jQuery - bird-alert

CSS3 Animated Alert Plugin With jQuery - bird-alert
File Size: 18.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

bird-alert is a small, customizable jQuery alert notification plugin which uses Animate.css for the awesome CSS3 animations.

More features:

  • Auto dismiss or click to close.
  • Custom show/hide animations.
  • 4 extra themes: Bulma, UI Kit, Bootstrap and Metro UI.
  • Easy to style in the CSS.
  • Custom position.
  • Allows to set the priority for each alert message.
  • onShow and onHide callback functions.

How to use it:

1. Load jQuery JavaScript library and the jQuery bird-alert plugin to the webpage.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
<script src="bird-alert.js"></script> 

2. Load the Animate.css for the CSS3 animations.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

3. Load a theme CSS of your choice as these:

<!-- Default -->
<link rel="stylesheet" href="bird-alert.css">

<!-- Bootstrap -->
<link rel="stylesheet" href="bird-alert-bootstrap.css">

<!-- Bulma -->
<link rel="stylesheet" href="bird-alert-bulma.css">

<!-- Metro UI -->
<link rel="stylesheet" href="bird-alert-metro-ui.css">

<!-- UI Kit -->
<link rel="stylesheet" href="bird-alert-uikit.css">

<!-- Foundation -->
<link rel="stylesheet" href="bird-alert-foundation.css">

<!-- Semantic UI -->
<link rel="stylesheet" href="bird-alert-semantic-ui.css">

<!-- Siimple -->
<link rel="stylesheet" href="bird-alert-siimple.css">

4. Initialize the bird-alert plugin and we're ready to go.

var birdAlert = new BirdAlert({
    // options here

5. Create and display a default alert message on the web page.

  msg: 'Alert Message', 
  title: 'Alert Title'

6. Create your own themes as follows:

.birdAlert .container-birdAlert.success {
  background: #caf5b2;
  color: #386a15;

.birdAlert .container-birdAlert.error {
  background: #ffcac8;
  color: #974a4a;

.birdAlert .container-birdAlert.warning {
  background: #f5dfa7;
  color: #755910;

.birdAlert .container-birdAlert.info {
  background: #c8f2ff;
  color: #366872;

7. Full plugin options to customize the alert message.

var birdAlert = new BirdAlert({
    clickToHide: true,
    closeButton: true,
    autoHide: true,
    duration: 5000,
    className: 'error', // success, alert, info, warning
    showAnimation: 'slideInDown',
    hideAnimation: 'slideOutRight',
    position: 'top left', // 'top right', 'top center', 'bottom left', 'bottom right', 'bottom center'
    inverseInsert: false,
    preventDuplicate: false,
    quantity: 7, // priority
    agroup: true, // is groupded?
    width: 400,
    zindex: 1000,
    onShow: function () {},
    onHide: function () {}

9. Set options manually.

  // options here

Change log:


  • Added more themes


  • Added Bulma, UI Kit, Bootstrap and Metro UI themes.


  • added new methods

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