1
Я создал следующий plunkr, чтобы продемонстрировать свою текущую проблему. (Я знаю, что содержимое iframe не загружается, но это не проблема.) Я динамически устанавливаю источник iframe в javascript после нажатия кнопки, я хочу показать индикатор загрузки до загрузки содержимого iframe, но когда iframe сделано, модальная стреляет с нижней части страницы вместо повторной центровки.Изменения модальности и не переопределяют модальные
Я пробовал $ ('# exampleModal1'). Foundation(), но было сказано, что это Foundation 5, тег reflow теперь ушел.
Я пробовал Foundation.reInit ($ ('# exampleModal1')) он ничего не делает И кнопка закрытия и esc/click, чтобы закрыть модальность, не работают.
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>