Simple Responsive Notification Bar Plugin With jQuery - cAlert

cAlert is a clean, simple and responsive jQuery notification plugin which helps display notification bars with various types and icons at the top of the webpage. Icons based on IcoMoon.

How to use it:

1. Load jQuery library and the jQuery cAlert plugin's files in the html page.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/cAlert.js"></script>
<link rel="stylesheet" href="css/cAlert.css">

2. Create a new notification bar.

• body: notification message
• type: 'danger', 'success', 'warning', 'danger', 'default' or custom CSS classname
• icon: icon class
• time: time in seconds to auto dismiss the notification bar

// cAlert(body, type, icon, time) 
var myAlert = new cAlert("Alert Message Here", "danger", "blocked", 2);

3. Apply you own CSS styles to the notification bar.

.cAlert-custom {
  ...
}

4. API methods.

• myAlert.alert(): Show the notification bar
• myAlert.dismiss(): Dismiss the notification bar
• myAlert.remove(): Remove the notification bar
• myAlert.onalert = function() {}: Called on myAlert.alert()
• myAlert.onalertdone = function() {}: Called when the show animation is done
• myAlert.ondismiss = function() {}: Called when the alert is being dismissed
• myAlert.ondismissed = function() {}: Called when the dismiss animation is done
• myAlert.onclick = function() {}: Called when the alert box is clicked
• myAlert.onremove = function() {}: Called when the alert box is removed

Change log:

2016-08-22

• Added a queue count on the alert

---

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