1

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

我试过 $('#exampleModal1').Foundation() 但被告知是 Foundation 5，reflow 标签现在也消失了。

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

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

1 回答 1

2

也许只是在 iframe 加载后触发窗口调整大小事件：

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

演示

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

于 2016-09-22T18:38:52.520 回答