/ / Foundation 6 Reveal Modal passt die Größe nicht dynamisch mit dynamischen Daten an - zub-foundation, zub-foundation-6

Foundation 6 Reveal Modal ändert seine Größe nicht dynamisch mit dynamischen Daten - zurb-foundation, zurb-foundation-6

Das folgende grundlegende Setup von Foundation 6 mit einem modalen Formular funktioniert. Und mit der Arbeit meine ich, sobald das modale Formular auf dem Bildschirm ist, ändert sich die Größe, wenn ich die Größe des Browsers ändere.

<!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>

Wenn ich nun den Inhalt in eine externe Datei lege, lade sie wie im Beispiel unten. Die modale Form wird nicht mehr korrekt angepasst.

<!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>

Weiß jemand, wie man das modale Formular richtig anspricht, wenn es dynamisch geladen wird?

Antworten:

0 für die Antwort № 1

Sie könnten versuchen, es auf die gleiche Weise zu ändernStiftung tut. In diesem Beispiel wäre das Aufdecken eine Variable, die Foundation.Reveal (jQueryElement) verwendet. Ein weiteres Beispiel für die Verwendung von Foundation.Reveal () finden Sie im nächsten Abschnitt.

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

Sie könnten auch versuchen, es etwas anders zu laden. Diese Technik scheint für mich zu funktionieren.

<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>

Ich habe einen Plunker hochgeladen, den du ausführen kannst http://run.plnkr.co/plunks/JcWnxTJg2Viy3qCKMUoB/ oder bearbeiten http://plnkr.co/edit/JcWnxTJg2Viy3qCKMUoB?p=preview