How to close fancybox from child window?

问题

parent link:

<a href="feedback.php" id="feed">Provide your feedback here</a>

jQuery code to initiate fancybox is...

$("#feed").fancybox();

codes in feedback.php...

      <html>
        <head>
<script language="javascript">    
$(document).ready(function(){
    $("#feed_submit").click(function(){
    //Name is alerted
    alert($("#name").val());

    //code to close fancy box(Not working)
    $.fancybox.close();

    });
    });
</script>
        </head>
        <body>
        <form method="post" name="feedback" id="feedback" action="">
                <div>
                    <label>name</label>
                    <input type="text" name="name" id="name"/>
                </div>
                <div>
                    <label>feedback</label>
                    <input type="text" name="content" id="content"/>
                </div>
        <div><input type="button" name="feed_submit" id="submit" value="submit"></div>
    </form>    
    </body>
    </html>

Once submit button is clicked i need to close fancy box in this page itself with jquery

i have tried using

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

But this doesn't work for me. If there is any option to close inside this ajax form please let me know.

回答1:

The following code should work, and has worked for many people

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

However, I have also seen, for instance in this question, jQuery being run in noConflict mode, unbeknownst to the user. If this is the case for you, you'd have to modify your script to

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

If none of those work, please use a tool like Firebug for Firefox, or the developer console for Chrome, to see if there is an error message, and report back to us what it is.

回答2:

Try

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

assuming that $.fancybox.close(); works in the parent window.

回答3:

Try:

$("#fancybox-close").trigger('click');

回答4:

When you're using fancybox with type: iframe, in the iframe box you have to insert all your libraries like jquery etc. Then to close iframe fancy box just use parent.$.fancybox.close()

Remember fancybox with type "iframe" opens in new window, fancybox with other types opens in the same window.

回答5:

Faced the same problem, this is the only solution i could finds that did the trick:

the code itself is:

parent.jQuery.fancybox.close();

it runs in a function as such:

jQuery("#cancelId").click(function(){
    parent.jQuery.fancybox.close();
});

hopes it helps, Naore

回答6:

$.fn.fancybox.close();

does this work ?

回答7:

//on child window or iframe put this function:

function closeIframe(){ parent.closeIframeMain(); }

// and this link to close this window

<a onclick="closeIframe();" href="#">Close window</a>

//then on parent window put this function:

function closeIframeMain(){ jQuery("#fancybox-close").trigger("click"); }

回答8:

It'll work for sure, just copy and paste it:

<a href="javascript:;" onclick="jQuery('.fancybox-close').fancybox().trigger('click');">Close from Inside</a>

Actually it triggers close button if fancybox itself, which works in majority of cases.

Have fun with programming :)

回答9:

I had the same problem, but with ASP.NET.

Basically, on a page, I'm opening a page (with a form control inside) like this:

$.fancybox({
                href: '/ContactUs.aspx',
                type: 'iframe',
                padding: 60,
                width: 465,
                height: 670,
                maxWidth: 465,
                maxHeight: 670,
            });

When I click close on the FancyBox, it works, but if I submit it first THEN close it, the fancyBox won't close, even thou the page is in the same domain.

In the end, I found out you must set autoSize:false when you open the FancyBox:

 $.fancybox({
                href: '/ContactUs.aspx',
                type: 'iframe',
                padding: 60,
                width: 465,
                height: 670,
                maxWidth: 465,
                maxHeight: 670,
                autoSize: false
            });

It should now work. Please reply if this works for anyone else. Cheers.

Will

回答10:

parent.jQuery.fancybox.close(); with .$. - creashes in IE8. With this - all ok.

来源：https://stackoverflow.com/questions/4390581/how-to-close-fancybox-from-child-window

标签

jquery

ajax

fancybox