foundation modal boxes grayed out

Question

Trying to figure out why my modal boxes using the reveal plugin from foundation is not working. I saw a similar question on stackoverflow where it was a z-index issue in the css, but I can't seem to target what is on top of my modal.

Here's the website I'm working on: http://eaglecrusher.300m.co/demo.html

If you click on the additional features link or the tap to enlarge link you will see the modals.

Here's the Modal markup for the link:

<pre><code><a href="#" data-reveal-id="additional-features">Additional Features</a>

Here's an abbreviated mark-up for the modal content:

<pre><code><div id="additional-features" class="reveal-modal" data-reveal>
<h3>Achieve Your Highest Return on Investment Ever With the E-Plant.</h3>
<a class="close-reveal-modal">&#215;</a></code></pre>

I loaded foundation at the bottom of the page as follows:

  <script src="js/foundation.min.js"></script>

  <script src="js/foundation.reveal.js"></script>

<script> $(document).foundation(); </script>        

Answer 1

Just remove the z-index on .main:

.main {
    padding: 0 2em;
    position: relative;
    z-index: 10; /* remove me */
}

As an aside, your layout is way too wide.