🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Notification Notification-bar

Documentation

gif_top

cAlert

A simple JS alert system that is easy to setup and use!

Requirements

JQuery

Usage

JavaScript:

var cAlertTest = new cAlert("This is a cAlert box that is very clean and simple!<p>It's also responsive on all screens! Isn't that just awesome? <i class='icon-accessibility'></i>", "danger", "blocked", 2); cAlertTest.queue();

HTML:

<script src="/js/cAlert.js"></script> <link href="/css/style.css" rel="stylesheet"/>

This depends on where you place the files and if you rename them to something, obviously.

Different styling

Example:

.cAlert-example { 	background: rgba(109, 175, 96, 1); 	border: 2px solid rgba(84, 142, 72, 1); 	color: rgba(40, 68, 34, 1); }

Icons?

Icons from IcoMoon are included. Usage:

<i class="icon-github"></i>

Result: icon_result

Events

// When the alert() function is called onalert = function() {}; // When the alert animation from alert() is done onalertdone = function() {};  // When the show() function is called onshow = function() {}; // When the dismiss() function is called ondismiss = function() {}; 	 // When the alert animation from show() is finished onshown = function() {}; // When the alert animation from dismiss() is finished ondismissed = function() {}; 	 // When the alert box is clicked onclick = function() {};  // When the alert is removed onremove = function() {};

API

cAlert(body, type, icon, time) → {cAlert Object}

  • body - The alert box content (Full HTML support)
  • type - The type of the alert box. This is the name of the cAlert- css class (For example "cAlert-success" would be type "success")
  • icon - The icon name, check icons.html for more information
  • time - The time in seconds until the alert is dismissed

Example:

var cAlertTest = new cAlert("This is a cAlert box that is very clean and simple!<p>It's also responsive on all screens! Isn't that just awesome? <i class='icon-accessibility'></i>", "danger", "blocked", 2);
  • cAlert.alert() - Show the alert (Not recommended. Instead, use queue())
  • cAlert.queue() - Queue the alert, it will be displayed when it's the first in the queue (Recommended use)
  • cAlert.dismiss() - Dismiss the alert manually (animation)
  • cAlert.remove() - Remove the alert manually (no animation)
  • cAlert.onalert = function() {} - Called on cAlert.alert()
  • cAlert.onalertdone = function() {} - Called when the show animation is done
  • cAlert.ondismiss = function() {} - Called when the alert is being dismissed
  • cAlert.ondismissed = function() {} - Called when the dismiss animation is done
  • cAlert.onclick = function() {} - Called when the alert box is clicked
  • cAlert.onremove = function() {} - Called when the alert box is removed

You May Also Like