Messi

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.

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

Usageshow/hide code

Simple message:

• Simple message

  new Messi('This is a message with Messi.');

• Message with title.

  new Messi('This is a message with Messi.', {title: 'Title'});

• Message in modal view.

  new Messi('This is a message with Messi in modal view. Now you can\'t interact with other elements in the page until close this.', {title: 'Modal Window', modal: true});

• Message in absolute position.

  new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}});

Buttons:

• Message with custom button.

  new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]});

• Message with custom buttons (yes/no) and callback function.

  new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }});

• Message with custom buttons (yes/no/cancel) with style classes.

  new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success'}, {id: 1, label: 'No', val: 'N', btnClass: 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]});

Applying styles to title:

• Success title.

  new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]});

• Info title.

  new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]});

• Error title (animated).

  new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]});

• Warning title (animated).

  new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Other options:

• Use Messi.alert() to launch a fast simple message.

  Messi.alert('This is an alert with Messi.');

• Use Messi.ask() to launch a fast yes/no message.

  Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); });

• Use Messi.load() to show an ajax request as a message.

  Messi.load('login.php', {params: {user: 'demo', password: '1234'}});

• Use Messi.img() to show an image.

  Messi.img('messi.jpg');

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

Changelog

Credits

Donations