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

讓我知道如果你需要更多的幫助