css - 基础模态框变灰

Question

试图弄清楚为什么我的模态框使用来自 foundation 的 reveal 插件不起作用。我在 stackoverflow 上看到了一个类似的问题，它是 css 中的 z-index 问题，但我似乎无法定位我的模态顶部的内容。

这是我正在处理的网站: http://eaglecrusher.300m.co/demo.html

如果您单击附加功能链接或点击放大链接，您将看到模态框。

这是链接的模态标记:

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

这是模态内容的缩写标记:

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

我在页面底部加载了foundation，如下:

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

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

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

Answer 1

只需删除 .main 上的 z-index:

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

顺便说一句，您的布局方式太宽了。