Fork me on GitHub


- A simple message plugin for jQuery -
by @marcosesperon


Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user.

Display text, html content, images and ajax requests with 5KB code.


Check in GitHub:


Simple message:


Applying styles to title:

Other options:


Messi requires jQuery framework to work, so include it first of all in your project. After that:

  1. Download Messi from gitHub and descompress.
  2. Copy messi.css and messi.js files (or minified version) to your project folder.
  3. Edit you html pages to include both files:
    <link rel="stylesheet" href="messi.min.css" />
    <script src="messi.js"></script>
  4. Enjoy it!


Option Description Default
autoclose Close message after 'x' milliseconds. null
buttons Array of buttons to show in the foot of the message, i.e: [{id: 'ok', label: 'OK', val: 'OK', class: ''}]. []
callback Callback function after close the message. null
center Centers message on the viewport. true
closeButton Show close button in header title (or content if buttons array is empty). true
height Content height. 'auto'
title Text title in the message. null
titleClass Title background CSS style: info, warning, success, error, anim. null
modal Shows message in modal view (load background div). false
modalOpacity If modal, set the div's opacity. .2
padding Sets the content padding. '10px'
show Show message after load. true
unload Unload message from DOM after hide. true
viewport If not center message, sets X and Y positions. {top: '0px', left: '0px'}
width Message width. '500px'
zIndex Message initial z-index CSS property. 99999


1.3 [13/03/2013]

1.2 [31/01/2013]

1.1 [01/05/2012]

1.0 [30/04/2012]


Messi is a plugin for jQuery JavaScript framework.

Based on Jason Frame's project Boxy.

Style classes for buttons are from Twitter Bootstrap's project.