3

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

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

4

2 回答 2

0

您可以尝试强制它以与 Foundation 相同的方式调整大小。在这个例子中，reveal 是一个使用 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

于 2016-02-19T21:48:03.580 回答
0

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

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

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

我希望这有帮助。

于 2019-06-03T14:10:14.467 回答