Simple Pretty jQuery Message Box Plugin - messageBox

File Size: 9.75 KB
Views Total: 16436
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="//"></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="//">

3. Load the Font Awesome to add custom icons in the message boxes.

<link rel="stylesheet" href="//">

4. Config the plugin.

var msg = $("body").messageBox({

// autoclose timeout. 0 = disable autoclose
autoClose : 0, 

// show autoclose counter
showAutoClose : true,       

// enable modal mode   

// 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         
  NO : 'No',
  YES : 'Yes',
  CANCEL : 'Cancel',
  OK : 'Okey',
  textAutoClose: 'Auto close in %d seconds'


5. Methods to create message boxes.

/*'messageBox').danger(title, text, [autoclose], [modal]);'messageBox').warning(title, text, [autoclose], [modal]);'messageBox').info(title, text, [autoclose], [modal]);'messageBox').default(title, text, [autoclose], [modal]);'messageBox').question(title, text, buttons, [autoclose], [modal]);'messageBox').exclamation(title, text, buttons, [autoclose], [modal]);

// warning'messageBox').warning('Title here', 'Content here');

// info'messageBox').info('Title here', 'Content here');

// danger'messageBox').danger('Title here', 'Content here');

// default'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.