Question

试图找出为什么我使用基础揭密插件的模态框不起作用。我在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>

我在页面底部加载了基础，如下所示：

  <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 */
}

顺便说一下，你的布局方式太宽了。

基础模态框变灰了

1 个答案: