“JQuery MessageBox” Documentation “” v1.0.1


“JQuery MessageBox”

Created: 20/09/2013

Thank you for using our script. If you have any questions that are beyond the scope of this help file, please feel free to email. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript

A) HTML Structure - top

We start of with a simple HTML5 document that will be the backbone of our example.

<!DOCTYPE html>
<html>
	<head>
		<title>Message box</title>
		<meta name="viewport" content="width=1024, initial-scale=1, maximum-scale=1">

		
		<link rel="stylesheet" type="text/css" href="includes/css/messagebox.css" />
		
		
		<script src="includes/js/jquery-1.10.0.min.js"></script>
		<script src="includes/js/jquery.messagebox.js"></script>
		
		
		<script>
			$(document).ready(function(){
				$('#messagebox').messagebox({
					title:'Title for Message Box', 
					messageText: 'Hello World',
					messageSubType: 'warning',
					messageType : 'alert',
					OkCallback: function() {
						alert('You pressed OK');
					},
					onClose: function() {
						alert('You closed the message box');
					},
					onCancel: function() {
						alert('You pressed cancel');
					} 
				});
			});
		</script>
	</head>
	<body>

		<!-- BEGIN CONTAINER -->
		<button id="messagebox">Alert</button>
		<!-- END CONTAINER -->

	</body>
</html>

Nothing unusual here. We have our main stylesheet (we will go back to it in the next section) and a number of JavaScript source files before the closing head tag.

The #messagebox button will hold the Alert Box. The id is required in order to be recognized by MessageBox.js.

<button id="messagebox">

	<!-- The Alert Message Triggered on Click of the button -->

</button>

B) CSS Files and Structure - top

We are using CSS files in this sample. This will contain header style, footer style and button style. Keep in mind, that these values might be overridden somewhere else in the file.

All these styles are customizable and can be change to different background and colors.

/* === MessageBox Overlay Section === */
	.msgboxOverlay{
			
	}
	
/* === MessageBox Container Section === */
	
	.msgcontainer{
			
	}
	
/* === Message Box Section === */

	/* = MessageBox Header = */
	.msgheader{
			
	}
	/* = MessageBox Header = */
	.msgfooter{
			
	}

	/* = Message Box CloseButton = */
	.msgclose{
			
	}

	/* = Message Box Button = */
	.alert-box .msgfooter button{
			
	}
	
/* === Message Box Option === */
	/* = Information Message Box= */
	.information .msgheader{
			
	}

	/* = Error Message Box= */
	.error .msgheader{
			
	}

	/* = Success Message Box = */
	.success .msgheader{
			
	}

	/* = Warning Message Box = */
	.warning .msgheader{
			
	}

Any images that are placed within the Message section can be customizable. If you would like to display any other image, find the following section in the style sheet:

	.msg{
			
	}

C) JavaScript - top

This script imports Javascript files.

  1. jQuery : jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. MessageBox

For start MessageBox add the following section in the javascript tag:

	$(document).ready(function(){
		$('#messagebox').messagebox();
	});

Many options available to customize the MessageBox: Below are the scripts that helpful in making messagebox work.

			var html = '
CloseMessage Box Title
Text
'; var buttonOk = ''; var buttonCancel = ''; var settings = { messageType: 'alert', messageSubType: 'warning', title: 'Message', messageElementId: null, messageText: '', OkCallback : null, onClose: null, onCancel : null }; var pluginName = 'messagebox'; function MessageBoxPlugin(element, options) { this.settings = settings; this.element = element; if (options) { this.options = options; } var current = this; $(this.element).click(function() { current.createMessageBox(); $('body').prepend(html); current.intialize(); }); } MessageBoxPlugin.prototype.createMessageBox = function() { $.extend(this.settings, this.options); var temp = $(html); if(settings.messageElementId) { temp.find('.msg').html($(settings.messageElementId).html()); } else { temp.find('.msg').html(settings.messageText); } temp.find('.msgheader span').html(settings.title); var buttons = buttonOk; if(settings.messageType === 'confirm') { buttons = buttons + buttonCancel; } temp.find('.msgfooter').html(buttons); html = $('
').append(temp.clone()).html(); } MessageBoxPlugin.prototype.intialize = function() { $.extend(this.settings, this.options); $('.msgboxOverlay .msgclose').off("click"); $('.msgboxOverlay .msgclose').on("click", function() { $('.msgboxOverlay').remove(); if(settings.onClose) { settings.onClose(); } }); $('.msgboxOverlay .buttonOK').off('click'); $('.msgboxOverlay .buttonOK').on('click', function() { $('.msgboxOverlay').remove(); if(settings.OkCallback) { settings.OkCallback(); } }); if(settings.messageType === 'confirm') { $('.msgboxOverlay .buttonCancel').off('click'); $('.msgboxOverlay .buttonCancel').on('click', function() { $('.msgboxOverlay').remove(); if(settings.onCancel) { settings.onCancel(); } }); } if(settings.messageSubType === 'warning') { if($('.msgboxOverlay .msgwrapper').next().hasClass()===true){ $('') } if(settings.messageSubType) { settings.messageSubType(); } } } $.fn.messagebox = function(options) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new MessageBoxPlugin( this, options )); } }); };

Some API

Default Settings:

settings = {
  messageType: 'alert',
  messageSubType: 'information',
  title: 'Message',
  messageText: '',
}

Options:

1.	messageType
	a.	‘alert’ (default)
	b.	‘confirm’ 
2.	messageSubType
	a.	‘information’ (default)
	b.	‘success’
	c.	‘error’
	d.	‘warning’
3.	title
4.	messageElementId
	ex: messageElementId : ‘#elementId’
5.	messageText
6.	height (numeric value)
7.	width (numeric value)

Events:

1.	OkCallback
	Ex:
	OkCallback : function() {
		  alert(‘You clicked Ok’);
	}
2.	onClose
	Ex:
	onClose: function() {
		alert(‘You closed the message box’);
	}
3.	onCancel
	Ex:
	onCancel: function() {
		alert(‘You clicked cancel’);
	}

Once again, thank you so much for reading this script. We'd be glad to help you if you have any questions relating to this script.

Go To Table of Contents