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

Question

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

在我看来，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;
}

z-indexUI 对话框 ( .ui-dialog)的默认值是1002

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

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

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

见JSFIDDLE