您如何强制 Foundation Reveal 模态将 HTML 块保留在父 div 块中？

Question

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

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

我试图通过指定父 div（参见上接受的答案）并使用 onclick 事件而不是基础 data-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>

这是上面例子的codepen。

Answer 1

您需要覆盖 Reveal 的基金会默认 appendTo 变量。可以通过以下方式完成：

向 Reveal div 添加 data-append-to="div#main" 以指定 Reveal 模式的父元素，如果适用，覆盖 div。这允许您为每个 Reveal 模态更改 dividually 中的父元素。资料来源：Foundation Documentation
通过在使用 Foundation.Reveal.defaults.appendTo = "div#main" 初始化 Foundation 时指定覆盖默认值来全局更改 Reveal 模块的默认值来源：Foundation Docs

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

您如何强制 Foundation Reveal 模态将 HTML 块保留在父 div 块中？

How do you force a Foundation Reveal modal to keep the HTML block inside the parent div it was written in?

javascript

zurb-foundation

zurb-reveal