Question

我试图在jQuery中的对话框上显示一个对话框。我遇到的问题是当打开顶部对话框时z-indexes是错误的，因此具有类ui-widget-overlay的div出现在第一个对话框后面而不是第二个对话框后面。

以下是z-indexes的细分：

我将引用以对话框＃1打开的第一个对话框，在对话框＃2上打开的对话框和ui-widget-overlay作为ui-widget-overlay＃1和ui-widget-overlay＃2分别。

对话框＃1打开，其z-index设置为1，ui-widget-overlay＃1 z-index设置为0

对话框＃2打开，其z-index设置为1，ui-widget-overlay＃2 z-index设置为0

然后当我关闭对话框＃2并重新打开它时，此时对话框＃2 z-index被正确设置为2并且ui-widget-overlay＃2被正确设置为1

有没有人知道为什么会发生这种情况，是否有一个jquery-ui设置我缺少告诉它增加后续对话框的z索引？

修改我还想指出我在对话框选项中设置了stack:true并且它没有任何区别。

Answer 1

我不得不使用一些黑客来使其按预期工作。

基本上我在创建模态时添加了一个事件，因此对话框初始化类似于：

  dialogWindow.dialog({
      modal: true,
      create: function(event, ui) {
          dialogWindow.parent('.ui-dialog').css('zIndex', 2)
              .nextAll('.ui-widget-overlay').css('zIndex', 1);
      }
    });

感谢以下帖子给我这个答案。

How to fix the zIndex issue with jQuery Dialog UI

jQuery UI对话框z-index问题

1 个答案: