Foundation 6 Reveal Modalを作成するたびに、実際の公開モーダルがどこに置かれているかにかかわらず、実際のHTMLはドキュメントの最後/最後に配置されるHTMLコード。ファンデーション6 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
より多くの支援が必要になった場合は、すべての子要素を折り返すために、親のdivタグを作ることができる知ってみましょうか?私たちが一緒に遊べるcodepenやjsfiddleがありますか? – Demon
Codepenの例で更新されました。私がHTML出力を調べると、 '#first-div'でそれを取得しようとしているときに、公開されたモーダルが(スクリプトタグの後であっても)HTML本体の最後に配置されます。 –
大丈夫です。私は問題が何かを見てみるつもりです。後で回答を投稿する。 – Demon