jquery jqModal Ajax et problèmes modaux imbriqués

Question

Je viens de commencer à utiliser jqModal car j'ai besoin de support pour les modaux imbriqués. Je remarque un comportement erratique avec des modaux imbriqués et ajax, mais je ne sais pas exactement comment y remédier. Ce qui se passe est quand je charge le modal principal, qui a un modal imbriqué dedans, j'obtiens deux divs de jqmOverlay, c'est comme s'il appliquait l'overlay pour les deux modaux, même si l'imbriqué n'a pas encore été déclenché. Donc, quand je ferme le modal, il y a toujours une superposition affichée. Voici le 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> 

Il semble fonctionner la première fois, mais si je ferme le modal principal, puis ouvrez à nouveau je reçois le double problème de superposition. Est-ce un bug? ou la façon dont j'appelle mon modal imbriqué? En outre, je sais que cela a à voir avec le modal imbriqué, parce que quand je supprime l'appel jqm sur le modal imbriqué, le modal principal fonctionne bien à chaque fois.

Answer 1

J'ai rencontré des problèmes similaires avec mes AJAX jqModals imbriqués. Voici la solution: le paramètre toTop, combiné avec z-index.

Définir un haut z-index de votre modal imbriqué, puis définissez ToTop true lors de la création du JQM. Par exemple:

// 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> 

déconner avec le paramètre z-index et la ToTop devrait aider à résoudre votre problème.