Question

以下基本的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>

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

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

我上传了一个可以运行http://run.plnkr.co/plunks/JcWnxTJg2Viy3qCKMUoB/或编辑http://plnkr.co/edit/JcWnxTJg2Viy3qCKMUoB?p=preview

的Plunker

Answer 2

根据我的经验，使显示组件以完美的方式进行完美工作的最佳方法是遵循以下模式：

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

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

我希望这会有所帮助。

Foundation 6 Reveal Modal没有使用动态数据正确调整大小

2 个答案: