I just started using jqModal as I need support for nested modals. I'm noticing some erratic behaviour 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.
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.