Skip to content
A simple JS alert system that is easy to setup and use! JQuery needed.
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
LICENSE
README.md
demo.html
icons.html

README.md

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 can’t perform that action at this time.