模态内容发生变化并且不重新居中模态

Question

我创建了以下 plunkr 来演示我当前的问题。（我知道 iframe 内容不会加载，但这不是问题。）单击按钮后，我在 javascript 中动态设置 iframe 源，我想在 iframe 内容加载之前显示加载指示器但是当 iframe 完成后，模式会从页面底部弹出而不是重新居中。

我试过 $('#exampleModal1').Foundation() 但被告知那是 Foundation 5，回流标签现在也不见了。

我试过 Foundation.reInit($('#exampleModal1')) 它什么都不做，关闭按钮和 esc/click 关闭模式不起作用。

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>

Answer 1

可能只是在 iframe 加载后触发 window 调整大小事件：

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

Demo

请注意，我为 iframe 加载添加了超时以更好地演示。

模态内容发生变化并且不重新居中模态

Modal content changes and does not re-center modal

javascript

zurb-foundation-6

zurb-reveal