2016-08-05 5 views
3

iframe에서 모달 대화 상자를 여는 중입니다. 모달 대화 상자를 여는 대화 상자는 iframe에 있지만 모달 div는 부모 페이지에 있습니다. 그러나 성공하지 못했습니다.부모 창으로 iframe에서 모달 창 열기

내가 부모 페이지에 아래와 같이있다 : - 프레임-1.html에서

 <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <title></title> 
      <script src="basic.js"></script> 
      <script src="jquery.simplemodal.js"></script> 
     </head> 
     <body> 
      <iframe src="Frame-1.html" width="400" height="400"></iframe> 
      <iframe src="Frame-2.html" width="400" height="400"></iframe> 

      <div id="modalPopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
        </div> 
       </div> 
      </div> 
     </body> 
     </html> 

그리고 코드는 아래와 같다 : -

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Modal popup</title> 
     <link rel="stylesheet" href="./bootstrap.min.css" /> 
     <script src="./jquery-1.11.1.min.js" type="text/javascript"></script> 
     <script src="./bootstrap.min.js" type="text/javascript"></script> 
     <script src="basic.js"></script> 
     <script src="jquery.simplemodal.js"></script> 
     <script> 
      $(document).on('hide.bs.modal', '#modalPopup', function() { 
       alert(''); 
       //Do stuff here 
      }); 

      //alert($(window.parent.document).find('#modalPopup').modal); 

      $(window.parent.document).find('#modalPopup').modal({ 
       appendTo: $(window.parent.document).find('body'), 
       overlayCss: { backgroundColor: "#333" }, // Optional overlay style 
       overlayClose: true, 
      }); 
      // Set overlay's width 
      $(window.parent.document).find('#simplemodal-overlay').css('width', '100%'); 
     </script> 
    </head> 
    <body> 
      <button type="button" class="btn" name="btn" id="btn" data-target="#modalPopup" 
        data-toggle="modal" data-backdrop="static" data-keyboard="false" href="./Popup.html"> 
       Click ME! 
      </button> 
    </body> 
    </html> 

저를 도와주세요. 어떤 도움을받을 수 있습니다. 미리 감사드립니다.

: 나는 당신의 코드 (및 localY하지 서버) 테스트 할 때

+0

귀하의 질문에 답변하고 답변하기 전에 : http://stackoverflow.com/a/951987/6681296 – JBartus

+0

공유 링크를 읽은 후 미안하지만 문제를 해결할 수 없습니다. – Coddder

답변

0

내가이 오류가 될 "catch되지 않은 오류 SecurityError을 : 원점 프레임 차단". 널 (null) "을"원점 프레임을 액세스하는 "널 (null)를 프로토콜, 도메인, 포트가 일치해야합니다. "

this이 도움이 될 수 있습니다.

+0

나는 어떻게해야할지 모르지만 위의 코드를 실행하는 동안 이러한 유형의 오류가 발생하지 않습니다. – Coddder

+0

@Codder 당신 말이 맞습니다. 내가 그것을 localy로 돌리고 있었기 때문에 그것을 생각해 보았습니다. 이제는 서버에 넣었고 제대로 작동했습니다. –

+0

고마워요.하지만 해결책은 없습니까? – Coddder