Download
Demo
- Overview
- Documents
User Rating: 4/5 ( 1 votes)
Your Rating:
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.
Setup
Messi requires jQuery framework to work, so include it first of all in your project. After that:
- Download Messi from gitHub and descompress.
- Copy messi.css and messi.js files (or minified version) to your project folder.
-
Edit you html pages to include both files:
<link rel="stylesheet" href="messi.min.css" /> <script src="messi.js"></script>
- Enjoy it!
Usage
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', class: 'btn-success'}, {id: 1, label: 'No', val: 'N', class: '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');
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 |