jQuery UI Dialog всегда открывается за окнами 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 директиву добавить содержимое к элементу внутри 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> 

Я потратил несколько часов, в последнее время, чтобы решить это, но у меня нет больше улик. Есть идеи ? Спасибо. Ivan

PS: datepicker работает ОК в пределах окна Fancybox.

Answer 1

The FancyBox контейнеры имеют эти z-index значения:

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

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

Значение по умолчанию z-index для диалога UI (.ui-dialog) является 1002

Попробуйте установить более высокую z-index чем FancyBox селекторов к вашему селектору UI Dialog (s), что-то вроде:

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

... уведомление, что !important важно;)

См JSFIDDLE