Geek Answers Handbook

Fancybox.close () on iframe

I am using the latest fancybox (2.0.4) and I created fancybox for iframe. the content is displayed correctly. I add a close button to my html, which is forbidden in the iframe. I want the close button to have the same result as pressing the "x" button in the upper right corner of fancybox. I am familiar with FancyBox iframe returns parent. $ as undefined (using WordPress) , and my parent is a DOM object in which there is nothing. 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 (related to 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>

as I have a button inside new.html that closes the fancybox iframe window

UPDATE: full html file

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>
+7
source share
3 answers

The close button for your manual should look like this:

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

UPDATE : you should use onsubmit in the <form> tag and not in 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 decided to remove all my additional comments on this answer, as the discussion became too long and did not lead to anything. I give a code and a link to a working demo if this can help anyone else.

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

!!! Not supported onClose !!!

+2
source

Try this in your Javascript:

$ fancybox.close () ;.

0
source

More articles:


All Articles