Question

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

我已经尝试了$（'＃exampleModal1'）。基金会（）但被告知是基金会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>

Answer 1

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

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

<强> Demo

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

模态内容发生变化，不会重新定位模态

1 个答案: