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’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’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">×</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?