Fork me on GitHub

Messi

- A simple message plugin for jQuery -
by @marcosesperon

About

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.

Messi

Check in GitHub: https://github.com/marcosesperon/Messi/

Usage

Simple message:

Buttons:

Applying styles to title:

Other options:

Setup

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!

Options

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

Changelog

1.3 [13/03/2013]

1.2 [31/01/2013]

1.1 [01/05/2012]

1.0 [30/04/2012]

Credits

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.

Donations