v 1.1.3


The modo.Notification element provides a better alternative to alert() messages to notify your user about something. They are placed in front of everything and will stack up from one corner of your application into a specific direction, just like GROWL messages.

The modo.NotificationContainer is used to collect groups of notification elements. The container places itself on top of everything and gives the order of notifications a direction.

Heads up! This element attaches itself automatically to the application root container upon creation. It does NOT need to be attached to a container manually.



The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.



The position of the notification container, seen absolutely inside your app. Default: top-right.

Possible values are: top-right, top-left, bottom-right, bottom-left


Defines where the next notification should be placed in the stack. Default: after

Possible values are: before, after


Defines the maximum number of notifications to be displayed in the box. All notification that are added above this limit are kept invisible until space gets free. Default: infinite


Defines the default display time in milliseconds of a notification after that its being removed from the container. Default: 5000


A function that is called upon each notification to be displayed on screen. The DOM element of the notification object is passed into the function.


function (elm){


A function that is called upon each notification to be hidden from screen. The DOM element of the notifications object is passed into the function, as well as a callback function to be called after the animation is complete.


function (elm){


A string with custom CSS classes to apply to the generated DOM element


A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.


The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.


The default show effect for the element. See associated property description. Default: null


The default hide effect for the element. See associated property description. Default: null


Inherited Properties from modo.Element


Contains the jQuery enhanced DOM Node of this modoJS element.


Contains a internally given, numeric ID for this element.


Will be set by .show() and .hide(). Access this property to check the current visibility of the element.


Set a default show effect (like the options you can pass to the show() / hide() methods.


element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']


Define a default hide effect instead of a simple, instant hide.



Adds a new notification element to the container.


This is a shortcut method to create a new modo.Notification object and directly add it to the container. The object is then returned from the method so you can keep a reference somewhere.



Triggered, whenever a new notification has been added through add() or createNotification().


Triggered, whenever a notification has been removed from the Notification Container. This happens when they either have expired, or defined to be invisible.


Triggered, when all notifications have been removed from the container.

Inherited Events from modo.Element


Triggered, when the object has been displayed through show()


Triggered, when the object has been hidden through hide()

CSS Classes


Applied on element.

mdo-pos-[top-left, top-right, bottom-left, bottom-right]

Applied dependend on the given position parameter in the constructor.

mdo-append-[before, after]

Applied dependent on the given append parameter in the constructor.

Inherited CSS Classes from modo.Element


Basic class that will be applied to every element that extends modo.Element.


Will be applied to every modo element where setFlexible(true) has been called upon.

comments powered by Disqus