Simple Pretty jQuery Message Box Plugin - messageBox
| File Size: | 9.75 KB |
|---|---|
| Views Total: | 16596 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
messageBox is a simple and small jQuery plugin that creates pretty dialog popups to show alert messages on your webpage. Supports 6 types of message box: warning, default, info, question, exclamation and danger. Works perfectly with Twitter's Bootstrap framework.
How to use it:
1. Load the jQuery messageBox plugin after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery.messagebox.js"></script>
2. Load the Twitter Bootstrap's CSS to make your message boxes prettier.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
3. Load the Font Awesome to add custom icons in the message boxes.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
4. Config the plugin.
var msg = $("body").messageBox({
// autoclose timeout. 0 = disable autoclose
autoClose : 0,
// show autoclose counter
showAutoClose : true,
// enable modal mode
modal:true,
// path to the CSS
css: 'css/messageBox.css',
// called when message box is closed
cbClose: false,
// called when message box is ready
cbReady: false,
// localization
locale:{
NO : 'No',
YES : 'Yes',
CANCEL : 'Cancel',
OK : 'Okey',
textAutoClose: 'Auto close in %d seconds'
}
});
5. Methods to create message boxes.
/* plugin.data('messageBox').danger(title, text, [autoclose], [modal]);
plugin.data('messageBox').warning(title, text, [autoclose], [modal]);
plugin.data('messageBox').info(title, text, [autoclose], [modal]);
plugin.data('messageBox').default(title, text, [autoclose], [modal]);
plugin.data('messageBox').question(title, text, buttons, [autoclose], [modal]);
plugin.data('messageBox').exclamation(title, text, buttons, [autoclose], [modal]);
*/
// warning
msg.data('messageBox').warning('Title here', 'Content here');
// info
msg.data('messageBox').info('Title here', 'Content here');
// danger
msg.data('messageBox').danger('Title here', 'Content here');
// default
msg.data('messageBox').default('Title here', 'Content here');
6. Parameters.
// messageBox title
title : '',
// messageBox body
text : '',
// an integer contains the delay to autoclose the messageBox
autoclose : 0
// enable modal mode
modal : true,
// the buttons to be displayed in the messageBox
// The return value will be passed to the callback function cbClose ()
buttons : {text: 'button text', return: 128}
This awesome jQuery plugin is developed by Zorglu. For more Advanced Usages, please check the demo page or visit the official website.











