zurb/foundation — Issue #376: Reveal - Modal displays in different locations, sometimes off page
Author: TechnotronicOz
Created: 2012-03-07 18:16:12+00:00
State: open

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.

```html

Mar

07

Wednesday

5:00pm

BB’s Lawnside BBQ

Kansas City, MO

Cancelled

BB’s Lawnside BBQ

Kansas City, MO

[google map]

Cancelled

Address
1205 E 85th St

Phone
816-822-7427

Website
http://www.bbslawnsidebbq.com/

×

```

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?

I have tried placing the modal code right before the closing

tag but when I do that, no modals fire at all when triggered.