Foundation Reveal Modal Pop up 向下答案

【问题标题】：Foundation Reveal Modal Pop up going downFoundation Reveal Modal Pop up 向下
【发布时间】：2014-09-05 16:21:50
【问题描述】：

我正在使用 Foundation 5“显示模式”来弹出内容。我将显示模态嵌套在显示模态中。并且嵌套了 4 个模态。

所以，当我调用第一个模态时，它很好地显示在屏幕中间。但是当我调用第二个模态时，它开始下降。当我打开第 3 个模态时，它会下降更多，而在第 4 个模态时，它会完全下降。

不要让更多混乱检查这个jsFiddle：
http://jsfiddle.net/4eoexrhp/1/

所以从那个小提琴中你可以看到，随着每个模式的弹出窗口都在下降。知道如何在打开不同的模式时将其放置到位吗？

代码非常简单

显示模式的 HTML 标记开始

<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
<p> Text</p>

<p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
<a class="close-reveal-modal">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal>
<p> Text </p>

<p><a href="#" data-reveal-id="thirdModal" class="secondary button">third Modal...</a></p>
<a class="close-reveal-modal">&#215;</a>
</div>

<div id="thirdModal" class="reveal-modal" data-reveal>
<p> Text </p>

<p><a href="#" data-reveal-id="fourthModal" class="secondary button">fourth Modal...</a></p>
<a class="close-reveal-modal">&#215;</a>
</div>


<div id="fourthModal" class="reveal-modal" data-reveal>
<p> Text </p>

<p><a href="#" data-reveal-id="close-reveal-modal" class="secondary button">End</a></p>
<a class="close-reveal-modal">&#215;</a>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

解决方案是让reveal-modal div的top属性值相同。

一个快速修复的解决方案是把它添加到你的reveal-modal css 类中：

.reveal-modal {
    top: 100px !important;
}

我注意到reveal-modal divs 的top 属性是通过js 设置的。因此，如果您讨厌使用 !important，您可以尝试在点击相应链接时重置 js/jquery 中的 top 属性。

我已将 top: 100px !important 添加到您提供的 jsFiddle 中，它位于此处： http://jsfiddle.net/4eoexrhp/4/

【讨论】：