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.
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
  );
}
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.
UI