Question

我正在使用Foundation 5“揭示Modal”来弹出内容。我在一个揭示模态中嵌套显示模态。并且有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>

Answer 1

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

快速解决方案是将此添加到您的reveal-modal css类：

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

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

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

基金会揭示莫代尔弹出下来

1 个答案: