What's new? | Help | Directory | Sign in
Google
modalbox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogues or even wizards (sequences of dialogues) without using conventional popups and page reloads.
  
  
  
  
    
Search
for
Updated Dec 18, 2007 by andrej.okonetschnikow
Labels: Help, Featured
MethodsReference  
Reference on basic ModalBox methods

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

Options

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/


Comment by xmaxfane, Nov 19, 2007

Can I block to the window mother until when I do not close the modalbox? Thanks

Comment by gerbilx, Dec 07, 2007

Is there a way of fading in the modalbox as opposed to sliding it in?

Thanks

Comment by superstylink, Dec 19, 2007

ciao first of all many compliments for your modal window implementation, I'm using with Adobe Spry , it works great if I have not to execute some javascript in the popup , but in my application I have inside the popup a spry dataset that isn't executed I also added the parameter evalScript: true but no way

<a href="some_spry.html" title="ready spry dataset" onclick="Modalbox.show(this.href, {title: this.title, width: 600 , evalScript: true} } }); return false;"><strong>ModalWindow?</strong></a>

thanks in advance

Comment by hoquangthaiholy, Jan 10, 2008

I can to hide a flash object when I show my ModalBox? ?

Comment by federicot, Jan 24, 2008

Hi,

It would be great if we could pass some style options like: Modalbox.show(this.href, {title: this.title, style:'margin: 0px'});

Comment by aproust94, Feb 04, 2008

Hi,

Since version 1.6.0 for wizard creation you should use <button type="button" onclick="Modalbox.show( 'frame_send-link-done.html', {title:'Sending status', width: 460, height:150}); return false;">Send link</button>.

Al

Comment by martincarstens, Mar 16, 2008

You are amazing! I've tried two other modal boxes and they both had trouble with form variable submits in wizard mode.

PS. I tried to donate, but it said you weren't allowed donations?

Comment by wyatt.eurich, Apr 03, 2008

Ditto: Other Modal boxes for use with prototype have too many issues yet. This one rocks. For those interested: I made mine draggable.

new Draggable('MB_window', {handle:'MB_header'} );

Comment by psp_...@hotmail.co.uk, Apr 17, 2008

i really cant install this :(

Comment by Sir.LuisLara, Apr 27, 2008

how i can disable de "close" option??

Comment by fblanch, Apr 28, 2008

@Sir.LuisLara? what i use to do is to deactivate the modalbox with the inactiveFade property disabled. Im not sure if its a best practice but it works for me


Sign in to add a comment