1
現在の問題を示すために、次のplunkrを作成しました。 （私は、iframeのコンテンツが読み込まれませんが、それは問題ではない知っている。）ボタンをクリックした後、動的にiframeソースをjavascriptで設定している、iframeコンテンツが読み込まれる前に、モーダルが再センタリングするのではなく、ページのボトムを撃つ。モーダルコンテンツが変更され、モーダルを再センタリングしない
私は$（ '＃exampleModal1'）を試しましたが、Foundation（5）だと言われましたが、リフロータグはもう消えています。
私はFoundation.reInit（$（ '＃exampleModal1'））を試していますが、何もしませんし、閉じるボタンとエスケープ/モーダルを閉じるためのクリックは機能しません。
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>