Foundation 6 Reveal Modal Renders at Bottom of HTML Document

0
votes

I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.

Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.

Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.

Example psuedocode: 

<div id="first-div">
  <div class="reveal" id="modal" data-reveal></div>
</div>

<div id="second-div">
  <p>Some stuff here</p>
</div>

Output in browser is: 

<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>

Edit: Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.

https://codepen.io/matt_hen/pen/RZZBQM

2
javascripthtmlzurb-foundationzurb-reveal
You could make a parent div tag to wrap around all the child elements? do you have a codepen or jsfiddle that we could play around with? – Demon
Updated with a Codepen example. When I inspect the HTML output the reveal modal is placed at the end of the HTML body (even after the script tags) when I am trying to have it in '#first-div'. – Matt H
okay. i will try to see what the issue is. i post a response later. – Demon

2 Answers

1
votes

You need to specify where your modal needs to pop up. I forked your codepen

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

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

Let me know if you need more help

1
votes

This works on Foundation 6:

You need to override the Foundation default appendTo variable for Reveal. That can be done the following ways:

  1. Add a data-append-to="div#first-div" tag on the Reveal div to specify the parent element for the Reveal modal and, if applicable, overlay divs. This allows you to change the parent element individually for each Reveal modal. Source: Foundation Documentation
  2. Change the default value for the Reveal module globally by specifying the override default value when you initialize Foundation with Foundation.Reveal.defaults.appendTo = "div#first-div" Source: Foundation Docs

In my testing, setting the parent to a smaller div inside the body element did not adversely affect the positioning of the modal or the display of the background overlay.

Specifying the parent in the call (e.g. $('#myDiv').foundation('reveal','open); does not work in the current release of Foundation.