jQuery jqModal Ajax and nested modal problems

jQuery jqModal Ajax and nested modal problems

无声静候 发布于 2021-11-24 字数 1189 浏览 976 回复 1 原文

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.

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

野生奥特曼 2022-06-07 1 楼

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.