2017-08-12 1 views
0

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

+0

より多くの支援が必要になった場合は、すべての子要素を折り返すために、親のdivタグを作ることができる知ってみましょうか?私たちが一緒に遊べるcodepenやjsfiddleがありますか? – Demon

+0

Codepenの例で更新されました。私がHTML出力を調べると、 '#first-div'でそれを取得しようとしているときに、公開されたモーダルが(スクリプトタグの後であっても)HTML本体の最後に配置されます。 –

+0

大丈夫です。私は問題が何かを見てみるつもりです。後で回答を投稿する。 – Demon

答えて

0

あなたのモーダルがポップアップする必要がある場所を指定する必要があります。私は

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

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

あなたcodepenをフォークし、私はあなたが

関連する問題