1

I have created the following plunkr to demonstrate my current issue. (I know the iframe content doesn't load but that is not the problem.) I am dynamically setting the iframe source in the javascript after the button is clicked, I want to show a loading indicator before the iframe content loads but when the iframe is done, the modal shoots off the bottome of the page instead of re-centering.

I have tried $('#exampleModal1').Foundation() but was told that was Foundation 5, the reflow tag is now gone as well.

I have tried Foundation.reInit($('#exampleModal1')) it does nothing AND the close button and esc/click out to close the modal do not work.

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