Ich habe die folgenden Plunkr erstellt, um mein aktuelles Problem zu demonstrieren. (Ich weiß, dass der Iframe-Inhalt nicht geladen wird, aber das ist nicht das Problem.) Ich setze die iframe-Quelle dynamisch in das Javascript, nachdem die Schaltfläche geklickt wurde. Ich möchte einen Lade-Indikator anzeigen, bevor der Iframe-Inhalt geladen wird Ist das erledigt, schießt das Modal von der Unterseite der Seite ab, anstatt es neu zu zentrieren.Modal Inhalt ändert und Re-Center nicht Modal
Ich habe versucht, $ ('# exampleModal1'). Foundation() aber wurde gesagt, dass die Foundation 5 war, das Reflow-Tag ist jetzt auch weg.
Ich habe versucht, Foundation.reInit ($ ('# exampleModal1')) es tut nichts UND die Schließen-Taste und esc/klicken Sie auf, um das Modal zu schließen, funktioniert nicht.
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>