title: jQuery UI Dialog always opening behind Fancybox windows
body: <p>I'm trying to open jQuery dialog <em>within</em> AJAX loaded Fancybox window.</p>
  
  <p>In Fancybox content I have following script:</p>
  
  <pre><code>$('#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;
  });
  </code></pre>
  
  <p>Unfortunately, Dialog is <em>ALWAYS</em> opened behind the Fancybox window. I try changing the <code>z-index</code> settings to <code>.ui-dialog</code> selector, but no luck. I did the same to 'firma_picker' DIV.</p>
  
  <p>It seems to me, that Dialog DIV code is always appended to body. So I have tried appendTo directive tio append content to element within Fancybox, but this doesn't work at all and Dilog is always appended to body.</p>
  
  <p>Code is applied to this HTML:</p>
  
  <pre><code>&lt;div&gt;
          &lt;label&gt;Firma:&lt;/label&gt;&lt;input type="text" name="nadpis" style="width: 325px; height: 14px;" placeholder="Kliknite na ikonu vyhľadávania vpravo" /&gt;
          &lt;a id="firma_opener" href="&lt;?php echo $this-&gt;baseUrl; ?&gt;/admin/reklama/firmasearch"&gt;&lt;img src="" alt="ikona vyhľadávania" /&gt;&lt;/a&gt; &lt;-- tu je ikona
          &lt;div id="firma_picker"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I spent few hours recently to get this resolved, but I haven't any more clues. Any ideas ? thank you.
  Ivan</p>
  
  <p>PS: datepicker is running OK within Fancybox window.</p>