Modality a simple jQuery Modal box plugin

This is a demo about the use of Modality plugin for jQuery, written by Diego La Monica.

If you think that this plugin or the tutorial saves you a lot time please consider a donation! Just a coffe would be apreciated! :)

Use Case #1

basic implementation

This example transform into a Modal Box the element after the code. You need to invoke the following script:

$('#theModalWindow').modality( {
	buttons: [
		{label: 'Cancel' },
		{	
			label: 'Ok', 	
			callback: function(){ 
				alert('confirm Clicked');
				return true; 
			}
		}
	]
});
			
See demo #1

The modal Window

Clicking on the above link this will become a modal window

Use Case #2

setup and execution

In a normal way you would setup the popup and then use it whenever you want. To tell to modality that you are doing an early-initialization of the object just put in the config JSON the init: true. You should put this code fragment into your DOMReady event or as soon as you would need it.

The modal Window #2

Clicking on the above link this will become a modal window

$('#theModalWindow2').modality( {
	init:	true,
	buttons: [
		{label: 'Cancel', 	},
		{
			label: 'Ok', 		
			callback: function(){ 
				alert('confirm Clicked');
				return true; 
			}
		}
	]
});
			

After you've initialized the modality object, you can invoke it as follows:

$('#theModalWindow2').modality()
See demo #2

Use Case #3

custom commands

You can add as many custom buttons as you want in the button bar of the modal box. There are some commands that implictly has an action name ( cancel if isCancel = true and confirm if isDefault = true). However you can define your own actions (like in the following example the say-hello). As for Use Case 2 put this code in the DOMReady event.

$('#theModalWindow3').modality( {
	init:	true,
	buttonBarId: 'button-bar-3',
	buttons: [
		{
			label: 'Cancel', 		
			isCancel: true
		},
		{
			label: 'Ok', 			
			isDefault: true,	
			callback: function(){ 
				alert('confirm Clicked');
				return true;
			}
		},
		{
			label: 'Say hello!', 	
			callback: function(){ 
				alert('Hello world!');
				return false; 
			}, 
			action: 'say-hello' 
		}
	]
});
			

You can invoke an action directly from the code using the following code:

javascript:$('#theModalWindow3').modality('say-hello');

The default actions are:

See demo #3 or See demo #3.1

The modal Window #3

This is a modal window of course (like use case 2), with 3 buttons. And a custom Say Hello action.

Try to press ENTER or ESC key. :-)

The modal Window #3.1

Just wait 5 seconds, it will disappear by its own.

Use Case #4

an advanced use

There are several options available, to customize completely the appearance and behavior of the plugin. Just take a look to the modality source code.

$('#theModalWindow4').modality( {
	init:	true,
	buttonBarType: 'p',
	buttonBarId: 'button-bar-4',
	theShadowId:	'the-shadow-id-4',
	minPaddingLeft: 100,
	minPaddingTop: 150,
	shadowCSS: {
		backgroundColor: '#800'
	},
	buttons: [
		{label: 'Cancel', 		isCancel: true},
		{
			label: 'Ok', 			
			isDefault: true,	
			callback: function(){ 
				alert('confirm Clicked');
				return true; 
			}
		}
	]
});
			
See demo #4

The modal Window #4

This is a modal window, of course like the Use Case #2. But here we are able to invoke the custom Say Hello action (linked to Use Case #3).

Try to press ENTER or ESC key. :-)


This is a demo about the use of Modality plugin for jQuery, written by Diego La Monica.

If you think that this plugin or the tutorial saves you a lot time please consider a donation! Just a coffe would be apreciated! :)