时间戳

首页 > 解决方案 > 您如何强制 Foundation Reveal 模式将 HTML 块保留在其写入的父 div 中？

javascript - 您如何强制 Foundation Reveal 模式将 HTML 块保留在其写入的父 div 中？

问题描述

当使用 Foundation 6 的 Reveal 模式时，javascript 会自动将显示div块放在结束body标记之前，而不是最初写入 DOM 的位置。我需要一种方法来将模态代码保留在我最初编写它的位置，或者至少指定它的父代。

这对我来说是个问题，因为我正在使用 AJAX 来呈现我的页面的一部分（div#main在下面的示例中），但是我的模态框一直在徘徊，因为它们被移到了外面div。

我试图通过指定父 div 来打开模式（请参阅此问题的已接受答案）并使用onclick事件而不是 Foundationsdata-open方法来执行此操作。对 div 的放置位置也没有任何影响。

例子：

<html>
  <head> ... </head>
  <body>
    <nav>...</nav>
    <div id="main">
      <h1>Section title</h1>
      <p>This is some information about this topic...</p>
      <button type="button" data-open="my-modal"></button>
      <!-- This is where I add the reveal modal to the DOM -->
      <div class="reveal" id="my-modal" data-reveal>
        <p>This is my modal content. This should have been positioned inside div#main but it got moved way down here.</p>
      </div>
    <!-- I need it to show up before the closing tag of this div -->
    </div>
    <footer>...</footer>
    <!-- This is where the reveal modal ends up -->
  </body>
</html>

这是上述示例的代码笔。

标签： javascriptzurb-foundationzurb-reveal

解决方案

您需要appendTo为 Reveal 覆盖 Foundation 默认变量。这可以通过以下方式完成：

  1. 添加一个data-append-to="div#main"到 Reveal div 以指定 Reveal 模态的父元素，如果适用，覆盖 div。这允许您为每个显示模式单独更改父元素。资料来源：基金会文档
  2. Foundation.Reveal.defaults.appendTo = "div#main"通过在使用Source初始化 Foundation 时指定覆盖默认值来全局更改 Reveal 模块的默认值： Foundation Docs

在我的测试中，将父元素设置为较小div的元素内部body不会对模态框的定位或背景叠加层的显示产生不利影响。

推荐阅读