jquery jqModal Ajax и вложенные модальные проблемы

Question

Я только начал использовать jqModal, поскольку мне нужна поддержка для вложенных модалов. Я замечаю какое-то неустойчивое поведение с вложенными модалами и ajax, но я точно не знаю, как это исправить. Что происходит, когда я загружаю основной модальный, который имеет вложенный в него модальный элемент, я получаю два div div jqmOverlay, это похоже на то, что он применяет наложение для обоих модалов, хотя вложенные еще не были запущены. Поэтому, когда я закрываю модальный, на дисплее отображается еще один оверлей. Вот код:

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

Это похоже на работу в первый раз, но если я закрываю основные модальный, а затем открыть снова я получаю проблему двойного наложения. Это ошибка? или способ, которым я называю свой вложенный модальный? Кроме того, я знаю, что это связано с вложенным модальным, потому что когда я удаляю вызов jqm на вложенный модальный, основной модально работает отлично каждый раз.

Answer 1

У меня были подобные проблемы с моими вложенными jQModals AJAX. Вот решение: параметр toTop, в сочетании с z-index.

Установите высокий Z-индекс ваших вложенной модальным, а затем установить Totop истину при создании JQM. Например:

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

Мессинг вокруг с г-индексом и Totop параметром должно помочь в решении вашей проблемы.