JQuery Modal Boxes and Iframe

Question

I\'ve been using Simple Modal and i feel it doesn\'t live up to what i need at the moment.

Is there a Modal Box that supports loading external files and allows those

Answer 1

HI, Anyone who is having trouble closing a Fancy Box iFrame using a manual install of Fancy Box in Wordpress 3.0:

Use this link in your iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

It works :)

Answer 2

Sounds like you already found the answer but for the benefit of others you can close an iFrame implementation of FancyBox by using the following JavaScript in the iFrame:

parent.$.fn.fancybox.close();

Answer 3

this is the script of dialog when i traced with firebug

<iframe> 
       scrolling="auto" 
       height="100%" 
       frameborder="0" 
       width="100%" 
       title="Dialog Title" 
       marginheight="0" 
       marginwidth="0" 
       id="modalIFrame"
       src="test.php" 
</iframe>

i need to change height to 95%, because the dialog scroll always visible in the screen T.T

Answer 4

Try colorbox it's also a good one.

Answer 5

This works for me...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />

Answer 6

Fancybox is also another option. Works similarly to Thickbox

EDIT:

It appears after some playing around that the plugin does not natively support closing the Fancybox through an child iframe element. I think that this is certainly achievable with a little effort (I started hacking together something here, although I stress that this was simply a POC and does not work as the button within the iframe removes the fancybox div wrapper from the DOM and therefore does not display when you click the google image again).I am wondering however, if an iframe is the right lines to go down.

For adding a user, my thought would be that you could present the user with a modal form like the one on the Monster site you get when you click 'Sign In.' Once you click add user, make an AJAX call to your datasource to insert a new user and then on returning success, you could either initiate a page refresh or use AJAX to update the list.

For editing a user, once a user is selected, you could make an AJAX call with a user id to populate a modal form with the user details retrieved from your data source when the AJAX call returns success. Once you have finished editing the user, make an AJAX call to update your datasource and then again, initiate a page refresh or use AJAX to update the list.

Instead of the page refresh or final AJAX call in each scenario, you could simply use JavaScript/jQuery to update the list/ list details, depending on whether a user has been added or edited, respectively.