Simple Pretty jQuery Message Box Plugin - messageBox
File Size: | 9.75 KB |
---|---|
Views Total: | 15934 |
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.