Modal Box

ModalBox is growing up! Now 1.5.4

Automatic height adjustments, completely new look & feel and lotta more features. Check it out!

Start Demo

Download latest version. It's free!

ModalBox on Google.Code

Installation

1. Download ModalBox and unpack to your /includes directory (you also need a prototype + script.aculo.us files there. Included to ModalBox package.)
2. Include the following JavaScript files in your pages:

   <script type="text/javascript" src="includes/prototype.js"></script>
   <script type="text/javascript" src="includes/scriptaculous.js? » 
       load=builder,effects"></script>
   <script type="text/javascript" src="includes/modalbox.js"></script>

3. Include the CSS file modalbox.css in your pages:

   <link rel="stylesheet" href="includes/modalbox.css" type="text/css" 
   media="screen" />

Reference

The Modalbox Object

ModalBox is a JS OO-style object. It has several public methods which can be called on ModalBox object.

Method show

Shows and redraws (if the ModalBox is already open) the ModalBox window with the given parameters.

show: function(content, options)

content — URL or HTML. URL to load inside the window using Ajax method or HTML (plain, existing node or object) to insert into the window.

options — set of options.

Options

• title: string Titile of the window. Default is ModalBox Window.
• overlayClose: boolean Close modal box by clicking on overlay. Default is true.
• width: integer Width in pixels. Default is 500px.
• height: integer Height in pixels. Default is 90px.
• loadingString: string The message to show during loading. Default is “Please wait. Loading...”.
• method: get | post Method of passing variables to a server. Default is 'get'.
• params: {param1: value1 [param2: value2 […]]} Collection of parameters to pass on AJAX request. Should be URL-encoded. See PassingFormValues for details.
• closeString: Defines title attribute for close window link. Default is "Close window".
• overlayOpacity: Defines opacity for the overlay. Value should be 0–1. Default is .75
• overlayDuration: Overlay fade in/out duration in seconds.
• slideDownDuration: Modalbox appear slide down effect in seconds.
• slideUpDuration: Modalbox hiding slide up effect in seconds.
• resizeDuration: Modalbox resize duration in seconds.
• inactiveFade: boolean Fades out ModalBox window on inactive state.
• Any supported callback. See callbacks section for details.

Method hide

Hides ModalBox window. You can pass afterHide callback using options parameter.

hide: function(options)

Method resize

Changes the dimensions of the ModalBox window without loading content into it.

resize: function(byWidth, byHeight, options)

Use relative values. If you want to shrink the ModalBox window, use negative values. For example: Modalbox.resize(0, -200); will shrink ModalBox window by height for 200 px.

Methods activate & deactivate

Makes ModalBox window active / inactive. Useful to prevent closing dialog window while some action is in progress. For example, uploading files etc.

Modalbox.deactivate(options);
Modalbox.activate(options)

Use inactiveFade: true | false option to toggle between fade and no-fade styles.

Callbacks

There are couple of callbacks supported by ModalBox:

• beforeLoad — fires right before content into the ModalBox. If the callback function returns false, content loading will skipped.
• afterLoad — fires after loading content into the ModalBox (i.e. after showing or updating existing window).
• afterHide — fires after hiding ModalBox from the screen.
• afterResize — fires after calling resize method.
• onShow — fires on first appearing of ModalBox before the contents are being loaded.
• onUpdate — fires on updating the content of ModalBox (on call of Modalbox.show method from active ModalBox instance).

How to use

Showing ModalBox

To invoke ModalBox all you need to do is call Modalbox.show(params); code on event.

For example, let's create a link with href and title attibutes filled. We will use them as parameters in our example:

<a href="frame_send-link.html" title="Simple form" 
onclick="Modalbox.show(this.href, {title: this.title, width: 600}); »
    return false;"> Send link to a friend</a>

Start Demo

From the version 1.5.4 you also may use “Offline-mode” to show modal dialogs without Ajax-requests and use instead pure HTML. Modalbox supports:

• plain HTML
• DOM nodes
• HTML JavaScript objects

You can find more info and demos on each method below

Plain HTML

Let's say you're about to show some kind of short confirmation dialog. Something like “Are you sure to delete this item?” Obviously, it's too much to use a separated HTML page and an additional Ajax request to do that. ModalBox is the solution:

Modalbox.show('<div class=\'warning\'><p>Are you sure to delete this » 
item?</p> <input type=\'button\' value=\'Yes, delete!\' »
onclick=\'Modalbox.hide()\' /> or <input type=\'button\' 
value=\'No, leave it!\' onclick=\'Modalbox.hide()\' /></div>', »
{title: this.title, width: 300});

See it in action

DOM Node

Now, let's say you already have a DOM node in your HTML document which could be referenced via ID or className attributes. Let's improve the above technique.

Here's how our existing DOM node looks like:

This block has an ID="domexample". We'll use it to show in ModalBox. Here's the code:

Modalbox.show($('domexample'), {title: this.title, width: 300});

See it in action

Notice, all attributes were copied into the new DOM node which was then used to show as ModalBox contents.

HTML JavaScript objects

Most advanced usage could be a JavaScript object contained HTML code. Let's use Script.aculo.us Builder for our example.

<script type="text/javascript" charset="utf-8">
	var node = Builder.node("div", {className: "warning", style: "border: 1px solid #0F0"}, [
		Builder.node("p", "Are you sure to delete this item?"),
		Builder.node("input", {type: "button", value: "Yes, delete it!", id: "deleteBut"}, ""),
		Builder.node("span", " or "),
		Builder.node("input", {type: "button", value: "No, leave it", id: "cancelBut"}, ""),
	]);

	function setObservers ()
	{
		$('deleteBut').observe('click', Modalbox.hide);
		$('cancelBut').observe('click', Modalbox.hide);
	}
	function removeObservers ()
	{
		$('deleteBut').stopObserving('click', Modalbox.hide);
		$('cancelBut').stopObserving('click', Modalbox.hide);
	}
</script>

<a href="#" class="demo-btn" title="JavaScript Object demo" 
onclick="Modalbox.show(node, {title: this.title, width: 300, 
	afterLoad: setObservers, onHide: removeObservers }); return false;">Link</a>

See it in action

Wizards creation

To create a simple process (as shown in the Examples) you need to call Modalbox.show(params); again from your ModalBox window:

<button type="button" onclick="Modalbox.show('frame_send-link-done.html', »
{width: 460, title: 'Sending status'}); return false;"> »
Send link</button>

Hiding ModalBox

To hide a ModalBox window with a custom link inside it, use the following:

<a href="#" title="Close window" onclick="Modalbox.hide(); »
return false;">Close</a>

Disabling Interactions

If you want to disable all interactions with ModalBox during the process (for example, during file uploading), use deactivate and activate methods. Since deactivated, ModalBox will not respond to ESC key and “Close” button will disappear. If you don't want ModalBox to fade out in inactive state, set inactiveFade parameter to false.

See it in action