2016-08-05 161 views
3

我想在iframe中打開模式對話框(打開模式對話框的按鈕是在iframe中,但模態div在父頁面中)。但沒有成功。從iframe打開模式窗口進入父窗口

我有一個父頁面如下圖所示: -

 <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> 

和代碼在幀-1.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> 

請幫助我。任何幫助是可觀的。提前致謝。

+0

您的問題已被詢問和回答之前: http://stackoverflow.com/a/951987/6681296 – JBartus

+0

對不起,但我無法在閱讀您的共享鏈接後解決我的問題。 – Coddder

回答

0

我成爲了這個錯誤,當我測試(localy不在服務器上),你的代碼:

「未捕獲的SecurityError:封鎖與原點的框架‘’訪問的框架與來源‘空’空協議,域,和端口必須匹配。「

也許this會幫助你。

+0

我不知道如何,但我運行上面的代碼時沒有遇到這種類型的錯誤。 – Coddder

+0

@Codder你是對的。我認爲這是因爲我正在運行它本地現在我把它放在我的服務器上,它運行正常 –

+0

感謝您的期待,但你有任何解決方案嗎? – Coddder