jQuery UI è utile, ma molti dei suoi widget soffrono di un fastidioso bug di progettazione. Se non si ha a che fare con le finestre modali, non si avrà nemmeno l’esperienza, ma se si tenta di utilizzare una funzione di completamento automatico o un widget datepicker all’interno di una finestra modale, troverete un

generato dinamicamente dietro il modale.

z-index e modals
Si potrebbe provare a codificare un z-index elevato per compensare questo, ma non è per niente flessibile, soprattutto all’interno di un complesso di modelli terze parti.
È per questo che si usa questo frammento di codice negli eventi open (autocomplete) o beforeShow (date picker), acquisito da fonti che non ricordo dove, per risolvere il problema.
[code lang=”javascript”] function(input, inst) {
var zMax = 1;
$(input).parents().each(function(){
zMax = Math.max(zMax, $(this).css(‘z-index’));
});

setTimeout(
function() {
$(‘.ui-datepicker .ui-autocomplete’).css(‘z-index’, zMax + 1);
},
300
);
}
[/code]

Purtroppo, l’uso di setTimeout() è necessario, perché l’evento viene generato prima che il codice venga aggiunto al DOM. Possiamo accorciare l’intervallo fino a circa 150 ms, ma a volte può fallire su macchine lente che usano IE.