模態內容更改並且不會重新居中模態

我已經創建了以下plunkr來演示當前問題。（我知道iframe的內容不會加載，但這不是問題。）我點擊按鈕後動態設置javascript中的iframe源代碼，我想在加載iframe內容之前顯示加載指示符，但iframe完成後，模式會從頁面的底部開始而不是重新居中。我試過$（'＃exampleModal1'）.Foundation（），但被告知是基金會5，迴流標籤現在也不見了。模態內容更改並且不會重新居中模態

我試過了Foundation.reInit（$（'＃exampleModal1'））它什麼都沒有做，關閉按鈕和esc /點擊關閉模式不起作用。

http://plnkr.co/edit/QgkDSz0MdAcIHLJ10LVC?p=info

<html> 
    <head> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/6.1.2/foundation.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="//cdn.jsdelivr.net/foundation/6.1.2/foundation.min.js"></script> 
    </head> 

    <body> 
    <h1>Foundation Reveal XHR Resize!</h1> 
    <button class="button">Click to Reveal</button> 
    <div class="reveal" id="exampleModal1"> 
     <div id="loading">Loading...</div> 
     <iframe id="iframeExample" style="display:none"></iframe> 
    </div> 

    <script> 
     $(document).foundation(); 
     var modal = $('#exampleModal1'); 
     var reveal = new Foundation.Reveal(modal); 
     $('button').click(function(){ 
      reveal.open(); 
      $('#iframeExample').attr('src', "https://www.google.com") 
     }); 

     document.getElementById('iframeExample').onload = function() { 
     $('#loading').css("display","none"); 
     $('#iframeExample').css("display","block").css("height","1000px"); 
     } 
    </script> 
    </body> 
</html>

來源

2016-09-22 theB3RV

也許只是觸發窗口的iframe加載後調整大小事件：

$('#iframeExample').load(function() { 
    $(window).trigger('resize'); 
});

Demo

請注意，我添加了一個超時的iframe負荷更好地展示。

來源

2016-09-22 18:38:52 isherwood

模態內容更改並且不會重新居中模態

回答

相關問題