jQuery jqModal Ajax 和嵌套模态问题

Question

我刚开始使用 jqModal，因为我需要对嵌套模式的支持。我注意到嵌套模式和 AJAX 的一些不稳定行为，但我不知道如何修复它。发生的情况是，当我加载其中有一个嵌套模式的主模式时，我得到了两个 jqmOverlay div，这就像它为两个模式应用了覆盖，即使尚未触发嵌套的一个。因此，当我关闭模式时，仍然会显示一个叠加层。代码如下：

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

我的嵌套 AJAX jqModals 也有类似的问题。以下是解决方案：toTop 参数与 z-index 结合使用。

设置嵌套模态的高 z-index，然后在创建 JQM 时将 toTop 设置为 true。例如：

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

使用 z-index 和 toTop 参数应该有助于解决您的问题。