CODEWITHSUNDEEP
javascriptmodal-dialog
stan
stan

Reputation: 4995

Closing a modal box with an iframe inside the iframe

I'm trying to programmatically close a Facebox modal with JavaScript code that's called within the iframe. That doesn't seem to work well with the JavaScript DOM.

https://github.com/defunkt/facebox

More generally, how would I close a generic modal that embeds an iframe with the code to close it inside the iframe. (sorry for the tounge(or eye) twisting)

Here's my example:

I have a facebox with something like this:

jQuery.facebox("stuff goes here <iframe src="example.php"...."  more stuff"); //opens the modal(works great)

Then INSIDE the iframe, I want to call jQuery(document).trigger('close.facebox');. It only seems to work if I call it on the parent page or on the modal page, but not in the actual iframe. Is there a way I can make it close by calling it within an iframe example.php?

Edit: I was asking how I can access the parent frame from inside an iframe with jQuery to oversimplify the question.

Upvotes: 2

Views: 8102

Answers (4)

Jim
Jim

Reputation: 31

Here's what worked for me:

My page has an IFRAME inside a DIV, the DIV is what facebox is supposed to fadeIn and fadeOut. The SRC of the IFRAME is a page that has a link on it that looks like this:

<a href="#" onclick="parent.close_QM_facebox()">close this facebox modal</a>

In the HEAD of the page that contains the DIV and IFRAME (NOT the page called into the IFRAME), I have the JavaScript function "close_QM_facebox()" that looks like this:

function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }

That's all. Not tested cross-browser or in production yet. I spent hours Googling this problem and trying everything from changing single quotes to double quotes, document-dot-this and parent-dot-that, window.frames['whatever'], and this one-line function does it. If you're trying to trigger the function from the page that is called into the IFRAME, you have to be sure to use parent.close_QM_facebox(). Hope this helps.

BTW, see lines 47 and 49 of facebox.js ver 1.2 - this solution was right there in the commented-out "Usage" section of the .js file itself. I copied & pasted line 49 into my function, didn't change a thing except un-commenting it :)

Upvotes: 1

Ivan Slaughter
Ivan Slaughter

Reputation: 767

I think, you can use FancyBox. There is public methods allowed to close the modal dialog within an iframe, also an option to make the fancy box act like modal window: - Within an iframe use - parent.$.fancybox.close();

No problem if you use scripting on the same domain, if you want to use cross domain just provide each page (.php/html etc) that call each other an exchange paramater/query safely using POST/GET. But to close the fancybox modal you have to run this methods with the same domain page.

Hope it works for you Stan.

Upvotes: 0

Alex
Alex

Reputation: 1594

You can't modify an element that "belongs" to the parent page from within that popup page. As far as I know you will have to issue your hide code from the parent. You could always have your code inside the dialog do something like this:

parent.$("#dialog").hide();

I think that's what you're asking...

Upvotes: 3

Spencer Ruport
Spencer Ruport

Reputation: 35117

The embedded iframe is pointing to a URL on a different domain correct? In this case no, you cannot for security reasons make any calls to the parent document from within the iframe.

Upvotes: 0

Related Questions