模态内容更改并且不会重新居中模态

我已经创建了以下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

模态内容更改并且不会重新居中模态

回答

相关问题