Question

我注意到每当我创建一个Foundation 6 Reveal Modal时，实际的HTML都放在文档的底部/末尾，无论实际的揭密模式放在我的HTML代码中的哪个位置。

虽然大部分时间都很好，但我遇到了一个边缘情况，我需要将一个表格部分放在一个模态中。问题是模式放在form_tag之外，因为Foundation Javascript将它移动到HTML文档的末尾。我已经能够解决它，但它使我的代码比它需要的复杂得多。

是否有任何简单的方法可以更改HTML文档中基础模式的位置？是否有任何特殊原因将模态放在HTML文档的末尾？不幸的是我在文档，基金会论坛或SO上找不到任何东西。

示例psuedocode：

<div id="first-div">
  <div class="reveal" id="modal" data-reveal></div>
</div>

<div id="second-div">
  <p>Some stuff here</p>
</div>

浏览器中的输出是：

<div id="first-div">
  <!-- this is empty now -->
</div>

<div id="second-div">
  <p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
  <div class="reveal" id="modal" data-reveal></div>
</div>

编辑：附加了Codepen注意到输出问题。模态在执行时打开和关闭，但在检查输出HTML时，揭示模式被移动到HTML文档的末尾 - 它实际上位于底部的标记之下。

https://codepen.io/matt_hen/pen/RZZBQM

Answer 1

您需要指定模式弹出的位置。我分叉你的codepen

$('#first-div').foundation('reveal', 'open');

https://codepen.io/titse/pen/ayygrW

如果您需要更多帮助，请告诉我

Answer 2

这适用于 Foundation 6：

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

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

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

在调用中指定父级（例如 $('#myDiv').foundation('reveal','open); 在当前版本的 Foundation 中不起作用。

Foundation 6显示HTML文档底部的模态渲染

2 个答案: