Foundation 6 Reveal Modal 无法使用动态数据正确调整大小答案

【问题标题】：Foundation 6 Reveal Modal not properly resizing with dynamic dataFoundation 6 Reveal Modal 无法使用动态数据正确调整大小
【发布时间】：2016-05-12 07:58:19
【问题描述】：

以下带有模态表单的基本 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>

任何人都知道如何在动态加载时使模态表单正确响应？

【问题讨论】：

您是否尝试过在元素上调用基础，例如调用$(this).foundation(); 而不是$(document).foundation();
$(this).foundation(), $('#modalContainer').foundation() 和 $('#modalForm').foundation() 似乎不是解决方案。感谢您尝试...
Foundation 5 有reflow 方法，Foundation 6 中去掉了，没有意义。对于像你这样的情况，我一直使用回流。
据我了解，F6 的 .foundation() 替换了替换/包含reflow，但可能（还）不能正常工作。我实际上从未尝试过 F5，但我可能会调查一下，因为我已经在这些化妆品上花费了很多时间......再次感谢。奇怪的是所有的基础属性都放在modal div里，但是动态加载的时候好像缺少data-events="resize"
我也读过，但不一样，因为您必须为每个单独的元素调用它，而不是像 F5 那样在 DOM 上调用它。

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

您可以尝试强制它以与 Foundation 相同的方式调整大小。在这个例子中，reveal 是一个使用 Foundation.Reveal(jQueryElement) 的变量。有关使用 Foundation.Reveal() 的另一个示例，请参阅下一个 sn-p。

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

【讨论】：

【解决方案2】：

根据我的经验，将显示组件设置为以完美的方式动态工作的最佳方法是遵循以下模式：

编写一个函数，该函数返回一个字符串，其中包含您要在显示中实现的 HTML 代码（这样在视图中，您只有）。我们称这个函数为revealHtmlFactory()。所以它将返回<h1>My Dinamic Reveal</h1> 等。
然后，为将成为显示切换器的按钮设置处理程序。我们称之为onRevealToggle()。这个处理程序将
1. $('#myReveal').html(revealHtmlFactory());
2. $(document).foundation();
3. $('#myReveal').foundation('open');

通过这种方式，您首先 (1) 确保在调用 Foundation 的初始化程序之前将显示内的 html 设置为您想要的方式。在那里，您可以动态设置所有响应式类，或者拥有多个返回不同 HTML 代码的函数。接下来（2）你重新初始化基础的内部状态。这是必需的，因为它将确保重新扫描视图以识别已更改的内容、必须添加新内容的位置等。最后 (3) 将打开 Reveal，以您想要的方式准确显示您想要的内容，反映信息的最后状态并重新加载视图中的所有内容。

我希望这会有所帮助。

【讨论】：