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

Question

我已经注意到，无论何时创建Foundation 6 Reveal Modal，实际的HTML都放置在文档的底部/末端，而不管实际显示模式放置在我的哪个位置HTML代码。

虽然这很好，但大部分时间我碰到一个边缘情况，我需要在表达式中放置一个模态。问题在于当基础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

你需要指定你的模式需要弹出。我叉你codepen

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

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

让我知道如果你需要更多的帮助