Introduction

This document describes ModalBox basic methods and explains how they should be used.

Reference

Method show

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

show: function(content [, options]), there

• content — Content to display inside the Modalbox. Might be an URL, plain HTML, DOM element or ID or even javascript object. Visit http://okonet.ru/projects/modalbox for examples.
• options — set of options.

Options

• title: Title to be displayed in the ModalBox window header
• overlayClose: true | false Close modal box by clicking on overlay. Default is true.
• width: integer Width in pixels. Default is 500.
• height: integer Height in pixels. Then set Modalbox will operate in 'fixed-height' mode. Otherwise the height will be calculated to fit content.
• method: get | post. Method of passing variables to a server. Default is 'get'.
• params: {} Collection of parameters to pass on AJAX request. Should be URL-encoded. See PassingFormValues for details.
• loadingString: string The message to show during loading. Default is "Please wait. Loading...".
• closeString: Defines title attribute for close window link. Default is "Close window".
• closeValue: Defines the string for close link in the header. Default is '×'.
• overlayOpacity: Overlay opacity. Must be between 0-1. Default is .65.
• 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: true | false, Toggles Modalbox window fade on inactive state.
• transitions: true | false, Toggles transition effects. Transitions are enabled by default.
• autoFocusing: true | false, Toggles auto-focusing for form elements. Disable it for long text pages.
• aspnet: true | false. To be used with ASP.NET controls. Then set to true Modalbox window will be injected into the first form element.

Method hide

Hides ModalBox window. You can use afterHide callback here.

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 in pixels. If you want to shrink the ModalBox window, use negative values.

Method resizeToContent

Changes the height of the ModalBox window to fit contained elements. Useful to adjust Modalbox height after altering the contents via javascript.

resizeToContent: function(options)

Method resizeToInclude

Changes the height of the ModalBox window to fit specified element. Call this method right before showing this element.

resizeToInclude: function(element [, options])

How to use

Showing ModalBox

To display ModalBox you need to call Modalbox.show(content [, options]). content might be the URL, plain HTML text, ID of DOM node or javascript object.

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.title, this.href, {width: 600}); return false;">Send link to a friend</a>

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('Sending status', 'frame_send-link-done.html', {width: 460, height:150}); 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>

For some live examples visit: http://wildbit.com/labs/modalbox/