CSS3 Animated Alert Plugin With jQuery - bird-alert

CSS3 Animated Alert Plugin With jQuery - bird-alert

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.
  • 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" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script> 
<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. Initialize the bird-alert plugin and we're ready to go.

var birdAlert = new BirdAlert({
    // options here
});

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

birdAlert.notify({
  msg: 'Alert Message', 
  title: 'Alert Title'
});

5. The basc CSS styles for the bird-alert plugin.

.birdAlert { position: absolute; }
.birdAlert .container-birdAlert {
  width: auto;
  background: #fff;
  box-shadow: 1px 1px 7px rgba(100,100,100,0.6);
  padding: 15px 15px;
  margin-bottom: 10px;
  text-align: left;
}
.birdAlert .container-birdAlert .close-birdAlert {
  position: absolute;
  right: 7px;
  font-size: 14px;
  top: 10px;
  cursor: pointer;
}
.birdAlert .container-birdAlert .close-birdAlert:hover { opacity: 0.5; }
.birdAlert .container-birdAlert .title-birdAlert {
  font-size: 20px;
  margin-bottom: 7px;
  font-weight: bold;
}

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.alert {
  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,
    autoHide: true,
    duration: 5000,
    className: 'error', // success, alert, info
    showAnimation: 'slideInDown',
    showDuration: 400,
    hideAnimation: 'slideOutRight',
    hideDuration: 200,
    position: 'top left', // 'top right', 'top center', 'bottom left', 'bottom right', 'bottom center'
    quantity: 7, // priority
    agroup: true, // is groupded?
    width: 400,
    zindex: 1000,
    onShow: function () {},
    onHide: function () {}
});

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

  • Publication date: 21.02.2018
  • Source