jquery jqModal Ajax and nested modal problems

Question

I just started using jqModal as I need support for nested modals. I'm noticing some erratic behavior with nested modals and ajax, but I don't know exactly how to fix it. What happens is when I load the main modal, that has a nested modal in it, I get two jqmOverlay divs, it's like it's applying the overlay for both modals, even though the nested one hasn't been triggered yet. So when I close the modal, there's still one overlay being displayed. Here's the code:

// Main Modal
$(function(){
 $("#modal").jqm({ajax:'@href'});
})
<a class="label jqModal" href="/suppliers/2/edit">View Supplier</a>


// Nested Modal code fragment within the /suppliers/2/edit html
$(function(){
 $("#nested_modal").jqm({ajax:'@href', zIndex:3001});
})
<a class="button jqModal" href="/suppliers/6/bills/new">Add Bill</a>

It seems to work the first time, but if I close the main modal, then open again I get the double overlay problem. Is this a bug? or the way I'm calling my nested modal? Also, I know it has to do with the nested modal, because when I remove the jqm call on the nested modal, the main modal works fine every time.

Answer 1

I had similar problems with my nested AJAX jqModals. Here's the solution: the toTop parameter, combined with z-index.

Set a high z-index of your nested modal, and then set toTop to true when creating the JQM. For example:

// Nested:
<div id="test" style="z-index: 5000;">Test content</div>
...
<script type="text/javascript">
$.ready(function(){
    $('#test').jqm({
    toTop:      true,
    modal:      true,
    overlay:     10,
    });
});
</script>

Messing around with the z-index and the toTop parameter should help in solving your problem.