|
MethodsReference
Reference on basic ModalBox methods
IntroductionThis document describes ModalBox basic methods and explains how they should be used. ReferenceMethod showShows and redraws (if the ModalBox is already opened) the ModalBox window with the given parameters. show: function(content [, options]), there
Options
Method hideHides ModalBox window. You can use afterHide callback here. hide: function(options) Method resizeChanges 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 resizeToContentChanges 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 resizeToIncludeChanges the height of the ModalBox window to fit specified element. Call this method right before showing this element. resizeToInclude: function(element [, options]) How to useShowing ModalBoxTo 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.href, {title: this.title, width: 600}); return false;">Send link to a friend</a> Wizards creationTo 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 ModalBoxTo 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/ |
Sign in to add a comment
Can I block to the window mother until when I do not close the modalbox? Thanks
Is there a way of fading in the modalbox as opposed to sliding it in?
Thanks
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
I can to hide a flash object when I show my ModalBox? ?
Hi,
It would be great if we could pass some style options like: Modalbox.show(this.href, {title: this.title, style:'margin: 0px'});
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
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?
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'} );
i really cant install this :(
how i can disable de "close" option??
@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
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
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
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
aaa
got the modalbox and google maps problem too, now trying the flash version.
When I tab from one input field to the next I get an error:
this.focusableElements.first() is undefined
Any ideas?
aspnet: true causes errors
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!
show modalbox 2s can't update the elements!!!
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.
Hi dijilraj
waiting for support from the modalbox creators is useless, maybe the code below can help you.
function handlePortfolioResponse(transport) {
}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
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!
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;
?
Is their a way to make the wizard use images or txt instead of btns. to move to the next step.
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)
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!
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:
Hi guys, i noticed that when I use onclick event for the closing of modalbox
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?