jQuery UI Dialog总是在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;
});

不幸的是，Dialog在Fancybox窗口后面始终打开。我尝试将z-index设置更改为.ui-dialog选择器，但没有运气。我对'firma_picker'DIV做了同样的事。

在我看来，Dialog DIV代码总是附加到正文。所以我尝试了appendTo指令tio将内容附加到Fancybox中的元素，但这根本不起作用，Dilog总是附加到body。

代码适用于此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：datepicker在Fancybox窗口中运行正常。

Answer 1

fancybox容器具有以下z-index值：

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

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

UI对话框（z-index）的默认.ui-dialog为1002

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

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

... 通知 !important很重要;）

参见 JSFIDDLE