Messi - non-football jQuery pop-up plugin

Greetings, residents of Habra'Polis!

When developing web interfaces, there is often a need to use pop-up (modal) popup windows or display messages. Search engines in the top of a long time already bored plug-ins a la "Colorbox" . I will not say anything bad about him - but it’s quite common and my eyes are somehow fed up with something.


')
The soul wants something new and universal, suitable for any interface design.
Therefore, I want to present jQuery message output plugin in the form of a pop-up window, the name of which is well known in the football world - “Messi” (MESsage SImple). So, let's begin…

1. Installing the plugin:

• We connect the jQuery library;
• Download Messi plugin from the Github repository;
• Copy the files: messi.css and messi.js to the project folder;
• We connect styles and script to the project:

<link rel="stylesheet" href="messi.min.css" /> <script src="messi.js"></script> 

2. Plugin options:

• “Autoclose” - close the window after 'x' milliseconds. Default: null
• “Buttons” - Array of buttons that will be in the window footer, for example: [{id: 'ok', label: 'OK', val: 'OK', btnClass: '}}. Default: []
• “Callback” - call the function after closing the window. Default: null
• "Center" - Align the window in the center of the screen. Default: true
• “CloseButton” - Show the “Close” button in the window header. Default: true
• "Height" - the height of the block with content. Default: 'auto'
• "Title" - the title of the window. Default: null
• “TitleClass” - Window title class: info, warning, success, error, anim. Default: null
• “Modal” - modal window mode (loading of an additional layer - dimming). Default: false
• “ModalOpacity” - Dimming transparency (only in modal mode). Default: .2
• "Padding" - Indentation in the content block. Default: '10px'
• "Show" - Show a window after loading. Default: true
• "Unload" - Unload the plugin from the DOM, after closing the window. Default: true
• "Viewport" - Sets the position of the window (if the "center" option is not set). For example: {top: '0px', left: '0px'}
• "Width" - The width of the window. Default: '500px'
• “ZIndex” - CSS property: z-index. Default: 99999

3. Using the plugin:

Simple message:

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

Post with title:

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

Post in modal mode:

 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}); 

Post arbitrary positioning:

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

Message with buttons:

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

Message with buttons (yes / no) function call:

 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 buttons (yes / no / cancel) + button 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'}]}); 

Title: Success:

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

Title: Info:

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

Title: Error (animated):

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

Caption: Warning (animated):

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

Using Messi.alert ():

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

Using Messi.ask ():

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

Using Messi.load ():

 Messi.load('ajax.html'); 

Using Messi.img ():

 Messi.img('messi.jpg'); 

Demo: http://marcosesperon.es/apps/messi/ .

Github: https://github.com/marcosesperon/Messi .

Button styles : http://twitter.github.com/bootstrap/ .

PS ... Who else could have come up with such a name, if not a Spaniard (fans will understand me).