jQuery UI Dialog always opening behind Fancybox windows

Question

I'm trying to open jQuery dialog within AJAX loaded Fancybox window. In Fancybox content I have following script: ``` $('#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; }); ``` Unfortunately, Dialog is ALWAYS opened behind the Fancybox window. I try changing the `z-index` settings to `.ui-dialog` selector, but no luck. I did the same to 'firma_picker' DIV. 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. Code is applied to this HTML: ```

Firma:

Accepted Answer

The fancybox containers have these `z-index` values :

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

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

The default `z-index` for a UI Dialog (`.ui-dialog`) is `1002`

Try setting a higher `z-index` than fancybox selectors to your UI Dialog selector(s), something like :

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

... notice that `!important` is important ;)

See JSFIDDLE

jQuery UI Dialog always opening behind Fancybox windows

Solution

Problem