Message Class v1.0

This Message Class is a simple Mootools class that will send a message to the user in style! It’s much more elegant than what you could expect from the alert javascript method.

Version: 2.1


Jason Beaudoin
Current version
GitHub Issues



  • _self_/_current_:
    • core/1.3: '*'
    • more/
    • more/
    • more/
    • more/
    • more/

How to use

All that you have to do is call the class, and as a minimum, you set three basic parameters:

  • the icon you want to use (40x40);
  • the title of your message;
  • the message itself

...then you execute your command:

  • say();
  • tell();
  • ask();
  • tip();
  • waiter();

Some Key Features

  • It fades in and fades out on it's own;
  • Force a response with the tell method;
  • Ask a user a question and execute a callback function on a "yes" click;
  • Position the message anywhere on the screen;
  • Use it as an input for comments... very useful!;
  • Style it the way you wish using CSS;
  • Make it as wide as you need (through the options);
  • Can be dismissed automatically, on an event, on a delay, etc
  • Much more!... check it out.


  • callingElement: (element: default to null)

  • top: (boolean: defaults to false) Set the message to come out from the top edge of the window. Defaults to the bottom.

  • left: (boolean: defaults to false) Set the message to the left. Defaults to right.

  • centered: (boolean: defaults to false) Set the message to the center of the window.

  • offset: (integer: defaults to 30) Determines the padding to give from the edge of the window frame.

  • width: (mixed: defaults to 'auto') The CSS value of your message. Pass a number to change it.

  • iconPath: (string: defaults to 'image/icons/') The path of the icons that you'd like to use.

  • icon: (string: defaults to null) The file name of your icon image. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.

  • title: (string: defaults to null) The title of your message.

  • message: (string: defaults to null) Your message.

  • delay: (integer: defaults to 0) Delays the display of your message. Integer is interpreted in milliseconds.

  • autoDismiss: (boolean: defaults to true) The message will dismiss on it's own.Note: this is shut off automatically when user input is needed.

  • dismissOnEvent: (boolean: defaults to false) The message will dismiss on the mouseout event. Note: this is used automatically when an event is passed.

  • isUrgent: (boolean: defaults to false) Use the "urgent" transitioning to get the user's attention. Note: this is automatically used on the ask and tell methods.

  • callback: (string: defaults to null) Send a function in the form of a string to be fired on confirmation of an ask method.

  • passEvent: (event: defaults to null) Passing an event will make the message appear the your cursor location (offset by 5 px).

  • tipMode: (boolean: defaults to false) Tip mode is a short-cut that sets the autoDismiss and dismissOnEvent to true.

  • stack: (Boolean: defaults to true) This stacks multiple messages on top of the previous messages (or under, depending on where you’ve put your message) instead of placing them over (as in using a z-index value). Setting it to false will use a z-index.

  • fxTransition: (Fx.Transition: defaults to null) Set your own transition. The default transition will simply fade in.

  • fxDuration: (mixed: defaults to 'normal') Set the transition duration. Intergers are interpreted in milliseconds.

  • fxUrgentTransition: (Fx.Transition object: defaults to Fx.Transitions.Bounce.easeOut) Set your own urgent transition

  • fxOutTransition: (Fx.Transition object: defaults to null) Set the out transition. The default will simply fade out.

  • fxOutDuration: (mixed: defaults to 'normal') Set the transition duration. Intergers are interpreted in milliseconds.


  • onShow: fires when the message shows
  • onComplete: fires when the message hides

Code Snippets

Say Method:

var saySimple = function(){
    new Message({   
        iconPath: "/images/",
        icon: "okMedium.png",   
        title: "Success!",      
        message: "You have successfully messaged your user." 

**Note: tell method is the same, except instead of say(), you write tell().

Ask Method:

var askSimple = function(){ 
    new Message({           
        iconPath: "/images/", 
        icon: "mediumQuestion.png",  
        title: "Question!",     
        message: "Do you know the meaning of life?", 
        callback: "saySimple()"     

Creating a comment pop-up:

This is a bit more complex, but it shows you the flexibility. What I do here is create a comment box and after the user presses "Send", a confirmation message appears!'commentLink').addEvent('click', function(e){
    var obj = new Element('div', {
        'id': 'dummy',
        'events': {
            'click': function(){
    new Message({
        icon: "speakMedium.png",
        iconPath: "/2010/images/",
        width: 300,
        fontSize: 14,
        passEvent: e,
        autoDismiss: false,
        title: 'Have a Comment?' ,
        message: '<textarea id="commentText" cols="3" rows="5" class="msgEditable"></textarea>',
        callback: obj
var sendComment = function(){
    new Message({
        icon: "okMedium.png",
        iconPath: "/2010/images/",
        title: "Received!",
        message: "We've received your comments, and we'll ...uhhh... get back to you."

Mootools Plugin Dependencies

Mootools Core 1.3 .

Mootools More 1.3:

  • Array.Extras;
  • Chain.Wait;
  • Element.Measure;
  • Element.Position;
  • Element.ShortCuts;


The styling is almost completely dependent upon the message.css included in the package. I do use CSS3, and I think it's about time! :)

It's been tested in IE 7+, Safari, Firefox, and Google Chrome. IE 6 is not supported.

It was developed on Mootools 1.2.4, and upgraded to 1.3 after the release of Mootools 1.3. Earlier versions can be found on Any problems, contact me at


You can find demos at ColdFire Designs: Message Class Demo

Simple Demo



A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus