Skip to content
Your standard jQuery plugin for fancy message box confirmations, notifications, etc.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
demo
dist
docs/images
images
libs
src
test
.gitignore
LICENSE-GPL
MessageBox.jquery.json
README.md
grunt.js
package.json

README.md

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.');

image

With Icon

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

image

Specifying Buttons

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

image

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);
			}
		}
	}
);

License

Copyright (c) 2012 Jeffrey Way
Licensed under the GPL license.

You can’t perform that action at this time.