javascript - Foundation 6 在 HTML 文档底部显示模态渲染

Question

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

虽然这在大多数情况下都很好，但我遇到了一种边缘情况，我需要在模态中放置一个表单部分。问题在于，当 Foundation Javascript 将模态框移动到 HTML 文档的末尾时，模态框被放置在 form_tag 之外。我已经能够解决这个问题，但它使我的代码比需要的复杂得多。

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

<小时/>

示例伪代码:

<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

您需要指定模态框需要弹出的位置。我 fork 了你的代码笔

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

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

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