/ / Foundation 6 Reveal Modal не правилно преоразмеряване с динамични данни - zurb-foundation, zurb-foundation-6

Фондация 6 не разкрива правилното преоразмеряване с динамични данни - zurb-foundation, zurb-foundation-6

Следващата основна настройка на Foundation 6 с модален формуляр работи. И с работа искам да кажа, след като модалната форма е на екрана, тя преоразмерява правилно, когато променя размера на браузъра.

<!doctype html>
<html>
<head>
<title>modal test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/foundation.min.css">
<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
</head>
<body>
<div id="headerContainer">
<a href="#" class="button" data-open="modalForm">Show Modal</a>
</div>
<div id="modalContainer">

<!-- start: modalForm content -->
<div class="reveal" data-reveal id="modalForm" role="dialog" >
<div class="row" >
<div class="medium-12 large-12 columns">
<p>modal test</p>
<button class="close-button" data-close aria-label="Close reveal" type="button"> <span aria-hidden="true">&times;</span> </button>
</div>
</div>
</div>
<!-- end: modalForm content -->


</div>
<script src="js/foundation.min.js"></script>
<script>
//$("#modalContainer").load("_form-modal-test.html", function() {
$(document).foundation();
//});
</script>
</body>
</html>

Сега, когато поставям съдържанието във външен файл, го зареждам като в примера по-долу. Модалният формат вече не се променя правилно.

<!doctype html>
<html>
<head>
<title>modal test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/foundation.min.css">
<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
</head>
<body>
<div id="headerContainer">
<a href="#" class="button" data-open="modalForm">Show Modal</a>
</div>
<div id="modalContainer"></div>
<script src="js/foundation.min.js"></script>
<script>
$("#modalContainer").load("_form-modal-test.html", function() {
$(document).foundation();
});
</script>
</body>
</html>

Всеки знае как да получи правилно отговорите на модалната форма, когато се зарежда динамично?

Отговори:

0 за отговор № 1

Може да се опитате да го принудите да преоразмерява по същия начинФондацията прави това. В този пример разкриването ще бъде променлива, използвайки Foundation.Reveal (jQueryElement). Вижте следващия фрагмент за още един пример за използване на Foundation.Reveal ().

$(window).resize(function(){
reveal._setPosition();
});

Можете също така да опитате да го заредите малко по-различно. Тази техника изглежда работи за мен.

<div class="reveal" id="exampleModal1">
<p>Some random text. Not loading the json file here.</p>
</div>

<script>
$(document).foundation();
var modal = $("#exampleModal1");
var reveal = new Foundation.Reveal(modal);
$("button").click(function(){
$.ajax("test.html")
.done(function(resp){
modal.html(resp);
reveal.open();
});
});
</script>

Качих Plunker, който ти може да тича http://run.plnkr.co/plunks/JcWnxTJg2Viy3qCKMUoB/ или редактиране http://plnkr.co/edit/JcWnxTJg2Viy3qCKMUoB?p=preview