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 参数应该有助于解决您的问题。