Problemi con i plugin jQuery Dialog e Datepicker

Question

Ho una finestra di dialogo e ho un campo Datepicker nella finestra di dialogo.

Quando apro la finestra di dialogo e faccio clic nel campo Datepicker, il pannello Datepicker mostra la finestra di dialogo.

Provo più proprietà: zindex, stack, bgiframe, ma non il successo.

Qualcuno può aiutarmi?

Tks.

Answer 1

Vecchio risposta

z-index (notare il trattino!) È la proprietà che conta. Assicurati di impostarlo più grande del dialogo e assicurati di impostarlo sull'elemento corretto. Ecco come lo facciamo:

#ui-datepicker-div 
{ 
z-index: 1000; /* must be > than popup editor (950) */ 
} 

API Change - 17 APRILE 2010

Nel file CSS per il calendario, trovare l'elemento .ui-datepicker e modificarlo:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; } 

Utilizzo di z-index: 9999! Importante; ha funzionato in Firefox 3.5.9 (Kubuntu).

Answer 2

La finestra di dialogo viene visualizzata in un iframe e viene visualizzata sopra a tutto il resto (inclusi i menu a discesa). Nel frattempo, il DatePicker è reso in HTML normale e posizionato assolutamente.

Sembra che il datapicker sia reso assolutamente relativo alla pagina padre anziché all'iframe. Hai provato a posizionare il calendario all'interno della finestra di dialogo come un normale blog non posizionato in modo assoluto? Oppure potresti usare i menu a discesa.

Answer 3

A partire dall'UI versione 1.7.2 ui-datepicker-div non è più un elemento css valido. "Ui-datepicker" sembra essere l'involucro più esterno e l'impostazione del z-index a 99999 funziona correttamente per me per quanto ne so

Answer 4

per jQuery-ui-1.7.2

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003; /* must be > than popup editor (1002) */ 
    } 
</style> 

Answer 5

Impostare questa nella parte superiore della pagina. E funziona bene:

<style type="text/css"> 
.ui-datepicker {z-index:10100;} 
</style> 

Answer 6

ho ottenuto che funziona chiamando

$("#ui-datepicker-div").css("z-index", "1003"); 

Answer 7

per jQuery-ui-1,8

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003 !important; /* must be > than popup editor (1002) */ 
    } 
</style> 

L'importante è necessario dal momento che la DatePicker ha un element.style che imposta z-index su 1.

Answer 8

Inserire lo stile seguente nell'elemento di testo "input": "posizione: relativa; z-index: 100000;".

Il div Datepicker prende lo z-index dall'input, ma funziona solo se la posizione è relativa.

Utilizzando in questo modo non è necessario modificare alcun javascript dall'interfaccia utente di jQuery.

Answer 9

Soluzione alla versione jquery datepicker 1.8.3, per modificare il valore z-index, non è impossibile cambiare tramite css.

Questo funziona bene:

jQuery('.ui-datepicker-trigger').click(function() { 
     setTimeout(function() { 
      jQuery('#ui-datepicker-div').css('z-index', 999); 
     }, 500) 
    }); 

Answer 10

Questo ha funzionato per me:

.ui-datepicker { 
     z-index: 9999 !important; 
    } 

Answer 11

Sono scioccato che:

a) nessuno qui ha citato una soluzione programmatica per l'impostazione the datepicker z-Index b) non esiste alcuna opzione per jQuery DatePicker per passare uno z-Index quando si associa a un elemento.

Sto utilizzando un metodo js per calcolare l'indice più alto. Di default controlliamo solo i div, perché questi sono gli elementi probabili per ottenere un valore z-index ed è comprensibilmente più veloce di analizzare ogni elemento della pagina.

/* Get the highest zindex for elements on the page 
*/ 
function getHighestZIndex(element){ 
    var index_highest = 0; 
    var index_current; 
    if(element == undefined){ 
     element = 'div'; 
    } 
    $(element).each(function(){ 
     index_current = parseInt($(this).css("z-index"), 10); 
     if(index_current > index_highest) { 
      index_highest = index_current; 
     } 
    }); 
    return index_highest; 
} 

Perché dobbiamo usare javascript di impegnare la DatePicker ad un elemento, vale a dire $ ('# some_element'). Datepicker(), a quel tempo abbiamo impostato lo stile del elemento di destinazione in modo che datepicker prenderà la z-index da esso. Grazie a Ronye Vernaes (nella sua risposta in questa pagina) per aver ricordato che datepicker() prenderà z-index dell'elemento bersaglio se è presente ed è impostato su position: relative:

$(this.target).datepicker(); 
var zindex = e.getHighestZIndex(); 
zindex++; 
$(this.target).css('position','relative'); 
$(this.target).css('z-index',zindex); 

this.target è l'elemento di input che stiamo creando in un campo Datepicker. Al momento del binding, otteniamo lo z-index più alto sulla pagina e aumentiamo lo z-index dell'elemento. Quando l'icona datepicker viene cliccata, raccoglierà tale z-index dall'elemento di input, perché, come Ronye Vernaes menzionato, della posizione dello stile: relativo.

In questa soluzione, non proviamo a indovinare quale sarà il valore più alto di z-Index. Otteniamo effettivamente IT.

Answer 12

Il datapicker ora imposta il popup z-index su uno più del suo campo associato, per tenerlo davanti a quel campo, anche se quel campo è esso stesso in una finestra di dialogo a comparsa. Di default lo z-index è 0, quindi datepicker finisce con 1. C'è un caso in cui questo non mostra correttamente il datepicker? JQuery Forum Post

Per avere un indice z di 100. È necessario un ingresso con z-index:99; e jQueryUI aggiornerà i datepicker essere z-index:100

<input style="z-index:99;"> o <input class="high-z-index"> e css .high-z-index { z-index: 99; }

È anche possibile specificare il z-index per ereditare quale dovrebbe ereditare dalla finestra di dialogo e causare jQueryUI per rilevare correttamente lo z-index.

<input style="z-index:inherit;"> o <input class="inhert-z-index"> e css .inherit-z-index { z-index: inherit; }