How do you force a Foundation Reveal modal to keep the HTML block inside the parent div it was written in?

Question

When using Foundation 6's Reveal modal, the javascript automatically puts the reveal div block immediately before the closing body tag, instead of where it was originally written into the DOM. I need a way to keep the modal code where I originally wrote it, or at least specify its parent.

This is a problem for me because I am using AJAX to render a portion of my page (div#main in the example below), but my modals are hanging around because they are moved outside of that div.

I tried to open the modal by specifying the parent div (see accepted answer on this question) and doing it with an onclick event instead of Foundations data-open method. Neither had any affect on where the div was placed.

Example:

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

Here is a codepen of the above example.

Amcar Amcar · Accepted Answer · 2021-02-03T21:20:53

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

Add a data-append-to="div#main" to 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
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#main" 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.

How do you force a Foundation Reveal modal to keep the HTML block inside the parent div it was written in?

1 Answers