jQuery UI对话框总是在Fancybox窗口后面打开。

Question

jQuery UI对话框总是在Fancybox窗口后面打开。

3

我正在尝试在 AJAX 加载的 Fancybox 窗口内打开 jQuery 对话框。

Fancybox 内容中我有以下脚本：

$('#firma_picker').load( $('#firma_opener').attr('href') );
$('#firma_picker').dialog({
                autoOpen: false,
                title: 'Výber firmy',
                width: 300,
                height: 400,
                modal: false,
                draggable: false,
                resizable: false
            });



$('#firma_opener').click(function() {
            $('#firma_picker').dialog('open');
            $('#firma_picker').dialog('moveToTop');

            return false;
});

很不幸，对话框总是出现在Fancybox窗口后面。我尝试更改z-index设置为.ui-dialog选择器，但没有成功。我对“firma_picker”DIV也做了同样的处理。

在我看来，对话框DIV代码总是被附加到中。因此，我尝试使用appendTo指令将内容附加到Fancybox内部的元素中，但这根本不起作用，Dilog总是附加到中。

该代码应用于此HTML：

<div>
        <label>Firma:</label><input type="text" name="nadpis" style="width: 325px; height: 14px;" placeholder="Kliknite na ikonu vyhľadávania vpravo" />
        <a id="firma_opener" href="<?php echo $this->baseUrl; ?>/admin/reklama/firmasearch"><img src="" alt="ikona vyhľadávania" /></a> <-- tu je ikona
        <div id="firma_picker"></div>
</div>

最近我花了几个小时来解决这个问题，但我已经没有更多的线索了。有什么想法吗？谢谢。伊万

PS：日期选择器在Fancybox窗口中运行正常。

- Ivan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JFK · Accepted Answer

fancybox容器具有以下的z-index值:

.fancybox-overlay {
  z-index : 8010;
}

.fancybox-opened {
  z-index : 8030;
}

UI对话框 (.ui-dialog) 的默认 z-index 为 1002

尝试将 UI 对话框选择器的 z-index 设置为比 fancybox 选择器更高，例如：

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

请注意，!important 是重要的；）

查看JSFIDDLE