Simple plugin for displaying custom message boxes to the user.
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>
- 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
Pass an array, where each item represents a button that should be displayed in the message box.
$.message('Here is my first message box.');
$.message('Here is another message.', { icon: 'alert'});
$.message('Are you sure that you wish to proceed? If so, please click "Yes."', { icon: 'setting', buttons: ['Yes', 'No', 'Cancel']});
$.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);
}
}
}
);
Copyright (c) 2012 Jeffrey Way
Licensed under the GPL license.