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

Question

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

在 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 做了同样的事情。

在我看来，Dialog DIV 代码总是附加到正文中。所以我尝试了 appendTo 指令 tio 将内容附加到 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 窗口中运行正常。

Answer 1

fancybox 容器具有这些 z-index 值：

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

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

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

尝试为您的 UI 对话框选择器设置一个比花式框选择器更高的 z-index，例如：

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

... 注意 !important 很重要 ;)

见JSFIDDLE