Simple Responsive Notification Bar Plugin With jQuery - cAlert

Simple Responsive Notification Bar Plugin With jQuery - cAlert
File Size: 396 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.