The Aurora plugin - Messages in style of jQuery UI, Bootstrap, UIkit

With this plugin you can create "on the fly" beautiful messages in the style of jQuery UI, Bootstrap or UIkit. JQuery UI, Bootstrap or UIkit frameworks are not required for the plugin to work, only for message icons.

Download (version 1.2):


Distributed under the GNU GPLv2 license or later.

Description of methods and properties of each of them is given below.

  1. Methods
  2. Properties of methods
  3. Examples


Aurora.message(data, selector, options); - creates a blank message without text with default settings.

Aurora.remove(selector, options); - deletes a message or all messages.


Properties of methods:

Properties of Aurora.message():

data Array with objects.

text - message text
type - message type(CSS classname). Can be info, alert, success or any other.
icon - message icon. jQueyUI or Bootstrap 2, 3 or UIkit required. cssClass - this classname will be added to each message.

		text: 'Test message for UIkit icons',
		type: 'info',
		icon: 'icon: paint-bucket'
		text: 'Test message for jQueyUI icons',
		type: 'success',
		icon: 'ui-icon ui-icon-lightbulb'
		text: 'Test message for Bootstrap 3 icons',
		type: 'alert',
		icon: 'glyphicon glyphicon-star',
		cssClass: 'abc'
selector css-selector where to insert message. Default into <body>. Not used with option attachTo: 'window'
options object with options.

attachTo - where to place the message. window - on top of all elements, document - into <body>.
position - message position. Values: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center, center-left, center-right, center-center. Not used with option attachTo: 'document'.
place - where to place the message. Values: insertAfter, insertBefore, appendTo, prependTo. Not used with option attachTo: 'window'.
replace - if true, all messages will be replaced by one, with the attachTo option and the selector.
Callbacks: onBeforeShow, onAfterShow

	attachTo: 'document',
	position: 'top-left',
	place: '',
	replace: false,
	onBeforeShow: function(){},
	onAfterShow: function(){}


Properties of Aurora.remove():

selector css-selector, NodeList or empty value. Leave blank to delete all messages.
options Object with only one option - callback onRemove



Simple demo:

Create a message and insert it into the body of the document

			text: 'Test message'

or create an error message and insert it into <div>

			text: 'Test error message',
			type: 'error'
<div id="err"> </div>

Other examples see in demo.