更改 jquery ui 对话框 z-index

Question

我正在使用 bootstrap 和 jquery UI 对话框。

在我的页面顶部有一个 z 索引为 1000 的元素。

当我打开其中一个 jquery UI 对话框时，外部 div 的 z 索引为 101。

我已将 modal 属性设置为 true，但对话框的顶部出现在标题中的某些内容后面。请注意，对于我标记中的实际 div，

<div id="divPopup" style="display: none; z-index:5000;"></div>

由于 5000，所以看起来很好。但是，对话框的顶栏出现在内容后面。

有没有办法改变包装div的z-index？

Answer 1

您需要使用纯CSS将对话框设置为“在顶部”：

.ui-dialog { z-index: 1000 !important ;}

完整答案这里

Answer 2

您需要向 div 添加一个位置才能使 z-index 正常工作。

<div id="divPopup" style="display: none;position:absolute, z-index:5000;"></div>

Answer 3

提供的大多数答案将更改可用/声明的对话框的“所有”z 索引。如果你想具体一点，你可以：

1. 在声明对话框时为对话框分配一个类：

$('#divPopup).dialog({
        modal: true,
        draggable: true,
        classes: {'ui-dialog': 'dlg_wrap'}, // Assign a class 'dlg_wrap' to the dialog
    });

2. 用 CSS 声明指定类的 z-index：

.dlg_wrap{z-index: 99999 !important;}

PS：向 div 声明内联 CSS z-index 不起作用。对话框标题将被排除。