Modal displays in different locations, sometimes off page

[TechnotronicOz]

I am working on a project where I'd like to use Reveal, it would really kick ass and I love the aesthetics of it (and not to mention the Foundation framework). However, I have run into an issue. I will describe what I am attempting, how I am attempting it and the results, along with a few screen shots to show the issue.

On a tour schedule for this particular project, there are roughly 30-50 dates displayed at any given time. When clicking on a venue name, it fires the modal with the relevant show and venue info. I am using a PHP foreach loop to display each show's respective row (

from Foundation) and after the ending

tag, I have the modal code.

<!-- Show Listing #1-->
        <div class="row show-list">
          <div class="three columns show-sep" style="padding-left: 20px;">

            <div style="float: left;">
              <div class="front-cal">
                <div class="month">Mar</div>
                <div class="day">07</div>
              </div>
            </div>

            <div class="datebox-details">
              <span class="day">Wednesday</span><br />
              <span class="time">5:00pm</span>
            </div>

          </div>

          <div class="five columns show-sep">
            <h3 class="venue"><a href="#" data-reveal-id="myModal1">BB&#8217;s Lawnside BBQ</a></h3>
            <span class="venue-location">Kansas City, MO</span> 

          </div>

          <div class="three columns">
                        <p class="gigpress-cancelled">Cancelled</p>
          </div>
        </div>

        <div id="myModal1" class="reveal-modal" style="box-shadow: 0 0 20px rgba(0,0,0,.6);">
            <h3>BB&#8217;s Lawnside BBQ</h3>
            <p>Kansas City, MO</p>

            <div class="modal-sep"></div>

            <div class="row">
                <div class="six columns">[google map]</div>
                <div class="six columns">

                    <p class="gigpress-cancelled">Cancelled</p>
                    <p><strong>Address</strong><br />1205 E 85th St</p>
                    <p><strong>Phone</strong><br />816-822-7427</p>
                    <p><strong>Website</strong><br /><a href='http://www.bbslawnsidebbq.com/' target='_blank'>http://www.bbslawnsidebbq.com/</a></p>

                </div>
            </div>

            <a class="close-reveal-modal">&#215;</a>
        </div>

                <!-- End Show Listing #1 -->

This fires the modal, but more often then not, the modal is displayed in a strange place. And as you go further down the show listing, the modal gets pushed further and further down until it goes WELL below the footer of the page and you have to scroll quite a ways just to see the darn thing.

I have tried moving the modal code outside of the the ending div tags but when I do so, no modal windows fire at all when clicked.

The first show in the list - when clicked the first time displays the modal almost completely above the entire page (only partially visible)
https://skitch.com/brilliantdick/889b4/shows-trampled-under-foot

Then after you close it, and re-click the first venue link, the modal is actually displayed in the proper place.
https://skitch.com/brilliantdick/889n1/shows-trampled-under-foot

This has completely boggled me and I'm almost to the point of giving up on Reveal. Anybody have any ideas as to why the modal location is inconsistent each time you click it and why as you go down a list, the modal window's location gets lower and lower until its completely off the page?

[mkelly12]

Have you tried putting the reveal modals right before the close body tag?

Also we are no longer providing support for stand alone Reveal. It's a part of Foundation now, and we're doing all the support through the GitHub page for Foundation.

https://github.com/zurb/foundation

[TechnotronicOz]

Yes, when I do that, no modals fire at all.

I'll post this on the Foundation page as well. Thanks man.

[TechnotronicOz]

Alright with making a few changes to the way my loop adds the modals, I can now get the modals to display with them just before the closing tag but the problem if inconsistent and improper modal placement when fired. Sometimes its high - high enough that you can't even see it, sometimes its low, sometimes its on a page or two down below.

Any thoughts on tackling this? Reveal in Foundation has been completely un-modified.

[mkelly12]

Do you have a live example we can inspect?

[TechnotronicOz]

@mkelly12 Just shot you an email.

[husainhk]

@TechnotronicOz: Have you been able to solve the modal location problem? I am facing exactly the same issue, despite my modal being the direct child of the .

Can you share the solution, please?

[mkelly12]

Did you try placing the modal right before the close body tag?

[ghost]

@mkelly12

That does the trick, thanks!

[spencer613]

Hi. I have moved the modals to before the body but I still have the same problem. See dev.streetlike.com. What should I do?

[kingzbauer]

I have a similar issue but moving the modal before the end of the body tag may not be as easy. I am using angular and the modal are making use of the scope within a controller. The controller is in a div which is a bit deep in the DOM tree. Any possible solution?