Close Facebox inside iframe

I am using this mod:

开发者_高级运维

http://lnx.shortcutto701.com/2010/05/21/using-iframe-with-facebox-jquery-plugin/

My question is, how do I make a button which is inside the iframe to close the facebox. I have been trying varients of this:

<button style="height: 50px;" onclick="window.parent.$.trigger('close.facebox')"><span class="button"><span>Cancel</span></span></button>

---

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_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_facebox() that looks like this:

function close_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_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 :)

---

self.close()

$('.open').click(function(){
    facebox = window.open("",
    "facebox","status=1,width=350,height=150");
    facebox.document.write('<h1>The Popup Window</h1><p><a onclick="self.close();"     href="#">close</a></p>');
});

---

You need to both use the parent's jQuery object and pass the parent's document as the jQuery argument:

parent.$(parent.document).trigger('close.facebox');