2012-02-02 2 views
7

나는 최신 fancybox (2.0.4)를 사용하고 있으며 iframe 용 fancybox를 만들었습니다. 내용이 올바르게 표시됩니다. 나는 iframe 내에서 disply 내 HTML에 "닫기"버튼을 추가합니다. 닫는 버튼은 fancybox의 오른쪽 상단 모서리에있는 "x"를 클릭하는 것과 같은 결과를 얻길 바랍니다. 나는 FancyBox iframe returns parent.$ as undefined (using WordPress)에 익숙하며, 내 parent은 아무것도없는 DOM 객체입니다. 또한 시도했습니다iframe에 Fancybox.close()

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

어떤 도움이 필요합니까?

UPDATE :

a.js합니다 (a.html 연결된) 내가 new.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> 

fancybox 닫 iframe 창

업데이트 : 전체 HTML 파일

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> 

답변

23

수동 닫기 버튼은 다음과 같은 모양입니다 :

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

UPDATE : 당신이 <form>onsubmit를 사용한다 태그가 아니라 button 이미지에 표시됩니다. 따라서 'n ew.html "같은 설정

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

UPDATE # 2 : 참조 working demo page

UPDATE # 3 : 토론이 너무 오래 된 이후 나는이 대답에 내 모든 추가 의견을 제거하기로 결정했습니다 우리를 데려 갔다. 이 코드가 다른 사람을 도울 수 있다면 코드와 링크를 실용 데모에 보냅니다.

+0

답변을 드릴 수는 있지만 작동하지 않습니다.'그게 무슨 크롬의 개발자 도구를 인쇄합니다'Uncaught TypeError : Can not 정의되지 않은 'fancybox'속성을 읽습니다. – MrRoth

+1

첫째, 감사합니다. 둘째, 물어 보는 게별로 없다면, 지퍼로 묶어서 링크를 달아 주시겠습니까? 파일을 다운로드 했으므로 경로가 내 fancybox 디렉토리로 변경되어 작동하지 않습니다. (iframe은 열리지 만 닫기는 작동하지 않습니다.) – MrRoth

+0

여기 내 디렉토리에 대한 링크입니다. 여기에는 파일과 fancybox 디렉토리가 포함되어 있습니다. http://www.mediafire.com/?0u04zdrz6v2tdi8 - 어떻게 생겨나 지요? 일? – MrRoth

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

!!! 지원하지 않음 onClose !!!

0

당신의 자바 스크립트이 시도 :

$ .fancybox.close();

+2

JS에 코드를 넣을 위치에 대한 자세한 정보를 포함 시키십시오. – Lima