Fancybox.close() on an iframe

jquery html dom xhtml fancybox

45,903

Solution 1

Your manual close button should look like:

<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>

UPDATE: you should use the onsubmit on the <form> tag, not on the button image so in your "new.html" set something like

<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">

UPDATE #2: see working demo page

UPDATE #3: I have decided to remove all my additional comments to this answer since the discussion became too long and took us nowhere. I let the code and a link to a working demonstration if this can help somebody else though.

Solution 2

    try{
        parent.jQuery.fancybox.close();
    }catch(err){
        parent.$('#fancybox-overlay').hide();
        parent.$('#fancybox-wrap').hide();
    }

!!!Not Support onClose!!!

45,903

Author by

Mr.

Updated on July 09, 2022

Comments

Mr. almost 2 years

i am using the latest fancybox (2.0.4) and i created a fancybox for an iframe. the content is displayed correctly. i add a "close" button to my html which is displyed within the iframe. i wish that the close button will have the same result as clicking the "x" on the right top corner of the fancybox. i am familiar with FancyBox iframe returns parent.$ as undefined (using WordPress), and my parent is a DOM object with nothing in it. also tried

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

any help?

UPDATE:

a.js (linked to the a.html)

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        type        : 'iframe',
        openEffect  : 'none',
        closeEffect : 'none',
        afterClose  : function() { 
            window.location.reload();
        }
    });
});

a.html

<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>

how can i have a button within new.html that closes the fancybox iframe window

UPDATE: a complete html files

a.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '70%',
                    autoSize    : false,
                    closeClick  : false,
                    type        : 'iframe',
                    openEffect  : 'none',
                    closeEffect : 'none',
                    afterClose  : function() { 
                        window.location.reload();
                    }
                });
            });
        </script>
    </head>

    <body>
        <a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>


    </body>
</html>

b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
    </head>

    <body>
        <input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
    </body>
</html>

Mr. about 12 years

i appreciate your answer, though it is not working! <body><form onsubmit="javascript:parent.jQuery.fancybox.close();"><input type="submit" value="Cancel"/></form></body> and that's what chrome's developer tools prints Uncaught TypeError: Cannot read property 'fancybox' of undefined
Mr. about 12 years

firstly, thanks a lot. secondly, if that's not much to ask, could you please zip it and put a link for it. since i downloaded your files, changed the path to my fancybox directory and it is not working. (the iframe opens up, but the closing isn't working)
Mr. about 12 years

here is a link to my directory, which includes your files and the fancybox directory mediafire.com/?0u04zdrz6v2tdi8 -- how come it is not working?
Mr. about 12 years

i do not have a hosting which i can use.. at least not one that surves http
Mr. about 12 years

any chance you could put your demo in a zip?
Mr. about 12 years

i want a zip file to examine your directory structre and which files of fancybox you refer explicity in your code, and to verify if there is some dependency between fancybox's files. what it has to do with server? (even though i have one), it should not be a problem to simulate a webpage in offline; or am i mistaken?
Mr. about 12 years

library which cannot be used localy is not implemented correctly. too many threads all over the internet regarding fancybox. i guess it is better to use some better and clever implementations. thank you anyway.
JFK about 12 years

it's not the library but mostly how differently browsers handle things ... you will learn that with the time (if you are serious about learning and understanding). For now, the easiest way is to blame fancybox
Lima over 8 years

Try including more details on where you would put the code in the JS
user2847376 over 6 years

I have been experiencing the same issue with a fancybox iframe popup. It works to add onsubmit="javascript:parent.jQuery.fancybox.close(); to the form tag, and successfully closes the iframe popup, but this prevents the form from submitting. I am submitting my form to the wordpress admin.php file. I need to process the values in the form and then return back to the popup and close it. Any suggestions for this scenario?
Nick Constantine over 5 years

@Lima Please review the initial question again! The question does not provide too much Javascript either. There are no details for me to provide...