messagebox's Introduction

Message Box jQuery Plugin

Simple plugin for displaying custom message boxes to the user.

Getting Started

Download the production version or the development version, as well as the associated stylesheet and images.

In your web page:

<link rel="stylesheet" href="css/message.css">

<script src="jquery.js"></script>
<script src="MessageBox.min.js"></script>
<script>
$.message('The most basic usage.');
</script>

Or, to specify an icon and buttons:

<script>
$.message(
	'Message box with settings.',
	{
		icon: 'setting',
		buttons: ['Yes', 'No', 'Cancel'],
		callback: function(buttonVal) {
			// buttonVal = Yes | No | Cancel
			// this = instance
		}
	}
);
</script>

Icon Choices

setting
info
notification
alert
accept

These are the built-in choices, however, you can specify any string as the value for icon. That value will then be applied to a new class: message-box-VALUE_YOU_PROVIDED. So, if you set icon: mine, a class of message-box-mine will be applied. You can then set a custom background image, accordingly. Refer to the icons directory in this repo for a variety of choices.g

Button Options

Pass an array, where each item represents a button that should be displayed in the message box.

Examples

Basic Usage

$.message('Here is my first message box.');

With Icon

$.message('Here is another message.', { icon: 'alert'});

Specifying Buttons

$.message('Are you sure that you wish to proceed? If so, please click "Yes."', { icon: 'setting', buttons: ['Yes', 'No', 'Cancel']});

Adding a Callback

$.message(
	'Are you sure?',
	{ 
		icon: 'setting',
		buttons: ['Yes', 'No'],
		callback: function(buttonVal) {
			if ( buttonVal === 'Yes' ) {
				$.message('You clicked Yes! Now you\'d proceed, accordingly.');
				console.log(buttonVal, this);
			}
		}
	}
);