CODEWITHSUNDEEP
javascripthtmlzurb-foundationzurb-reveal
Matt H
Matt H

Reputation: 740

Foundation 6 Reveal Modal Renders at Bottom of HTML Document

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

Upvotes: 0

Views: 902

Answers (2)

Amcar
Amcar

Reputation: 43

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.

Upvotes: 1

Demon
Demon

Reputation: 826

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

Upvotes: 1

Related Questions