Simple Pretty jQuery Message Box Plugin - messageBox

File Size: 9.75 KB
Views Total: 16286
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Pretty jQuery Message Box Plugin - messageBox

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.