Foundation 6 の Reveal モーダルを使用すると、javascript は自動的に、DOM に最初に書き込まれた場所ではなくdiv、終了タグの直前に Reveal ブロックを配置します。bodyモーダル コードを最初に記述した場所に保持するか、少なくともその親を指定する方法が必要です。
ページの一部をレンダリングするために AJAX を使用しているため (div#main以下の例)、これは私にとって問題ですが、モーダルはその外側に移動されているためぶらぶらしていdivます。
親divを指定してモーダルを開こうとしました（この質問onclickに対する受け入れられた回答を参照）、 Foundationsdata-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>
上記の例のコードペンを次に示します。