My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
MethodsReference  
Reference on basic ModalBox methods
Help, Deprecated
Updated Dec 15, 2009 by andrej.o...@gmail.com

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: Send link to a friend

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', {title: 'Sending status', 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:

Close

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

Comment by xmaxf...@gmail.com, Nov 19, 2007

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

Comment by gerb...@gmail.com, Dec 7, 2007

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

Thanks

Comment by supersty...@gmail.com, 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 hoquangt...@gmail.com, Jan 10, 2008

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

Comment by federi...@gmail.com, 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 aprous...@gmail.com, Feb 4, 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 martinca...@gmail.com, 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.eu...@gmail.com, Apr 3, 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 ESR...@gmail.com, Apr 17, 2008

i really cant install this :(

Comment by Sir.Luis...@gmail.com, Apr 27, 2008

how i can disable de "close" option??

Comment by fbla...@gmail.com, 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

Comment by lavozdig...@gmail.com, May 15, 2008

did anyone try to show a google map inside a modalbox?. I show it but not really properly and it doesn't work. any idea ? thanks in advance

Comment by lavozdig...@gmail.com, May 15, 2008

did anyone try to show a google map inside a modalbox?. I show it but not really properly and it doesn't work. any idea ? thanks in advance

Comment by lavozdig...@gmail.com, May 15, 2008

did anyone try to show a google map inside a modalbox?. I show it but not really properly and it doesn't work. any idea ? thanks in advance

Comment by kuno1...@gmail.com, May 16, 2008

aaa

Comment by motov....@gmail.com, Jun 9, 2008

got the modalbox and google maps problem too, now trying the flash version.

Comment by i...@blizzard-media.com, Jun 25, 2008

When I tab from one input field to the next I get an error:

this.focusableElements.first() is undefined

Any ideas?

Comment by omeg...@gmail.com, Jul 14, 2008

aspnet: true causes errors

Comment by playwith...@yahoo.com, Sep 22, 2008

hi - how do you pass form vars into the modal? ie, have a form submit call the modal and inject form1 vars to be able to be used with the modal form?

thanks!

Comment by 66y...@gmail.com, Nov 10, 2008

show modalbox 2s can't update the elements!!!

Comment by dijil...@gmail.com, Nov 16, 2008

If I update the contents inside the modalbox using Ajax.Updater how can I adjust the height of modalbox?.resizetocontent and resizetoinclude does not seem to work.When using these, though the height of modalbox increases the scroll bar also appears,as only after updation the resizing works.

Comment by maatc...@gmail.com, Jan 4, 2009

Hi dijilraj

waiting for support from the modalbox creators is useless, maybe the code below can help you.

function handlePortfolioResponse(transport) {

var src = ''; var resp = transport.responseText;
var aHtml = resp.split('"');
aHtml.each(function(item) {
if(item.indexOf('jpg')>-1){
src = item;
}
});
var image = new Image(); image.src=src; image.onload = function() {
Modalbox.resizeToContent()
};
}

Comment by BIODE...@HOTMAIL.CO.UK, Jan 16, 2009

how can you open an external website in the modalbox, i have tried this <a href="http://www.google.com" class="demo-btn" title="Click to see the demo" onclick="this.blur(); Modalbox.show(this.href, {title: 'Welcome to ModalBox demo', width: 600, height:600}); return false;"><span>Start Demo</span></a>

thanks

Comment by scottsw...@austin.rr.com, Feb 5, 2009

Hi -

I have a page that uses Modalbox to successfully call up a window with a form built in. The submit button has the following code in it that works to keep modal window up and switch to an ASP server side script that processes the form data:

Modalbox.show('store_cart_add_to.asp', {title: 'Sending status', method: 'post', params: Form.serialize('view_details" & trim(cstr(x)) & "'), overlayClose: true }); return false;

BUT I want that page, after it processes the data to cause the modal to hide. So I tried the following change to the submit button code:

Modalbox.show('store_cart_add_to.asp', {title: 'Sending status', method: 'post', params: Form.serialize('view_details" & trim(cstr(x)) & "'), overlayClose: true, beforeShow: Modalbox.hide(); return false; }); return false;

However, now, it will not submit. I tried changing "beforeShow: Modalbox.hide(); return false;" by removing the return false and by changing the "beforeShow" to other things like "beforeLoad", "afterLoad", etc. Nothing seems to work.

Ideas?

Thanks!

Comment by scottsw...@austin.rr.com, Feb 5, 2009

oh and... is there any diff between these two syntaxes:

Modalbox.show('page.asp', {title: 'Sending status', method: 'post', params: Form.serialize('view_details'), beforeShow: Modalbox.hide(); return false; }); return false;

AND

Modalbox.show('page.asp', {title: 'Sending status', method: 'post', params: Form.serialize('view_details')}, {beforeShow: Modalbox.hide(); return false; }); return false;

?

Comment by r...@jestercom.com, Apr 27, 2009

Is their a way to make the wizard use images or txt instead of btns. to move to the next step.

Comment by macphist...@gmail.com, Apr 28, 2009

Hi, i have a problem width the ModalBox?. When i used the script inside a ajax tab the showmodal is displayed inside of this ajax tab not in the main container page. How i can change the container of the show modal? (Sorry for my english, im from Chile. Cheers)

Comment by jorge.an...@gmail.com, May 20, 2009

In Internet Explorer 7 have a problem about can´t move focus when in the modal window target have not a input element. The message is: " Error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

Thanks!

Comment by jorge.an...@gmail.com, May 20, 2009

Try with autoFocusing = false but still have the problem. My solution was add a check if is true the autoFocusing parameter in the line 375, in setFocus:function(). The final function is:

setFocus: function() {
/ Setting focus to the first 'focusable' element which is one with tabindex = 1 or the first in the form loaded. / if(this.focusableElements.length > 0 && this.options.autoFocusing == true) {
var firstEl = this.focusableElements.find(function (el){
return el.tabIndex == 1;
}) || this.focusableElements.first(); this.currFocused = this.focusableElements.toArray().indexOf(firstEl); firstEl.focus(); // Focus on first focusable element except close button
} else if($(this.MBclose).visible() && this.options.autoFocusing == true)
$(this.MBclose).focus(); // If no focusable elements exist focus on close button
}
Comment by carlpo...@gmail.com, Jun 4, 2009

Hi guys, i noticed that when I use onclick event for the closing of modalbox

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

there's a noticable delay when the modalbox closes, sometimes it even halts halfway from closing, but not too often though, there are just times when this happens. So I tried changing it to href="javascript:Modalbox.hide()" and it worked fine.

Any of you guys experienced the same?

Comment by robert...@gmail.com, Jul 16, 2009

Wow! This is a life saver (nearly).

Great job & great work, awesome usage of the framework

Comment by wen.ss...@gmail.com, Aug 26, 2009

modalbox 1.5.5 : focus problem solution.

line: 291 old: var firstEl = this.focusableElements.find(function findFirst(el){ chg: var firstEl = this.findFocusableElements(function findFirst(el){

line: 296 old: firstEl.focus(); // Focus on first focusable element except close button chg: this.focusableElements[this.currFocused].focus(); // Focus on first focusable element except close button

Comment by smhil...@gmail.com, Aug 28, 2009

There was a comment about an error begin received: "this.focusableElements.first() is undefined"

In the function insertContent, it is checking for content type == string. Here there is a hack for Firefox to prevent the content from flickering: if(typeof content == 'string') {

setTimeout(function() { // Hack to disable content flickering in Firefox
this.MBcontent.update(content);
}.bind(this), 1);

This causes the content to not be available when the function findFocusableElements tries to access MBcontent and retreive all focusable elements. Change to just the line:

this.MBcontent.update(content);
and it works fine!

I'm using version 1.6.0 date: 12/13/2007 This hack is not in 1.5.5

I hope this helps!

Comment by jasonm...@gmail.com, Sep 4, 2009

Any chance we can get this modal box to appear dead center of the view port, vs drawing anchored to the top?

Comment by arton...@gmail.com, Oct 24, 2009

hello !! The code works great but i dont't know how to set any information inside the contend!! I use this <a href=" Here i set destionation" title="Simple form" onclick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">Send link to a friend</a> but nothing hapend, is still blank ??

any one can help me

Comment by benlawso...@gmail.com, Nov 12, 2009

I could REALLY use some help in hiding a flash gallery underneath the modalbox window. The window content shows, but the flash overlaps some of the window elements and looks ugly. Simply using $("stoopidFlash").hide() and $("stoopidFlash").show() actually remove the flash from it's container and calling the function that placed it there in the first place does nothing.

Ideas?

Comment by nahuelbu...@gmail.com, Nov 17, 2009

Hi, is there any way to set a "time out" method or something similar? I need to do this to avoid users waiting for so long if the requested page in modalbox its broken or never loads. Btw i'm using this on a java/struts project. Any idea? Thanks in advance....

Comment by Gepapadi...@gmail.com, Apr 6, 2010

hello, what about google maps? Any light there...

Comment by lfv.lu...@gmail.com, Sep 3, 2010

How can I open a Modalbox from a Javascript function? (not on an event of a button or href)

This code doesn't works for me:

<script language="javascript" type="text/javascript">
function openModalBox(id)
{
   Modalbox.show('imagen.aspx?id='+id, { title: 'Some Picks', width: 1024, height: 768 }); 
    return false;
}
</script>

Is there any way to call a ModalBox?? using Javascript??

Comment by gerardo....@gmail.com, Dec 29, 2010

only spanish,

return false; NO return; Yes

test???

Comment by tyson...@gmail.com, Jan 1, 2012

MODALBOX form not working in firefox

What to do???


Sign in to add a comment
Powered by Google Project Hosting