Foundation-sites: Nested reveal with data-multiple-opened="true" has wrong z-index

[umphy]

How can we reproduce this bug?

1. Use the nested example from Foundation docs: http://foundation.zurb.com/sites/docs/reveal.html
2. Reverse the order in which the divs are defined
3. For the nested modal, add the attribute data-multiple-opened="true"

What did you expect to happen?

I expected the nested modal to appear on top of the first modal.

What happened instead?

The nested modal appeared behind the first modal.

Note that if the order of the divs were not reversed, then it's OK. It seems the layering depends on div order rather than when reveals are opened.

Test case:

JSFiddle: https://jsfiddle.net/noxquws1/19/

[nbeltran]

i have the same problem. the solution that i found.
you need put second modal inside of first modal sample :

<p><a data-open="exampleModal2">Click me for a modal</a></p>

<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal>
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
<div class="reveal" id="exampleModal3" data-reveal data-multiple-opened="true">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
`
https://jsfiddle.net/noxquws1/22/

[MarcoNicolodi]

@nbeltran solution doesnt work on ajax loaded modals :(

[adnhack]

The solution I found to prevent this on ajax loaded content is to open the modals using:

function openMyModal(){
var modal = new Foundation.Reveal( $( '#myModal' ) );
modal.open();
}

function openMyOtherModal(){
var modal = new Foundation.Reveal( $( '#myOtherModal' ) );
modal.open();
}

That works for me and prevent to open the modals on the back, hope this help

[JeremyEnglert]

This seems like an edge case and the example above should fix it in these instances. Thanks @adnhack!