以下具有模式形式的基本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">×</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>
有人知道动态加载时如何使模态形式正确响应吗？
最佳答案
您可以尝试强迫它以与Foundation相同的方式调整大小。在此示例中，揭露将是使用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
关于zurb-foundation - Foundation 6 Reveal Modal无法正确调整动态数据的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35171665/