Problema con los complementos de jQuery Dialog y Datepicker

Question

Tengo un cuadro de diálogo, y tengo un campo de marcador de fecha en el cuadro de diálogo.

Cuando abro el cuadro de diálogo y hago clic en el campo datepicker, el panel del selector de fecha se muestra detrás del cuadro de diálogo.

Intento más propiedades: zindex, stack, bgiframe, pero no éxito.

¿Alguien me puede ayudar?

Tks.

Answer 1

respuesta Antiguo

z-index (tenga en cuenta el guión!) Es la propiedad que importa. Asegúrese de configurarlo más que el diálogo, y asegúrese de configurarlo en el elemento correcto. He aquí cómo lo hacemos:

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

Cambio API - 17 de abril 2010

En el archivo CSS para el selector de fechas, encontrar el elemento .ui-datepicker y cambiarlo:

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

Usando z-index: 9999! Important; funcionó en Firefox 3.5.9 (Kubuntu).

Answer 2

El cuadro de diálogo se procesa en un iframe y se representa sobre todo lo demás (incluidos los menús desplegables). Mientras tanto, el marcador de fecha se procesa en HTML normal y se coloca absolutamente.

Parece que el marcador de fechas se está procesando absolutamente en relación con la página primaria en lugar del iframe. ¿Has intentado colocar el calendario dentro del diálogo como un blog estándar, no de posición absoluta? O podrías usar los desplegables en su lugar.

Answer 3

A partir de UI versión 1.7.2 ui-datepicker-div ya no es un elemento CSS válido. "Ui-selector de fechas" parece ser la envoltura más externa y establecer el índice z de 99999 está funcionando correctamente para mí por lo que yo sé

Answer 4

para jQuery-UI-1.7.2

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

Answer 5

Ajuste este en tu parte superior de tu página. Se trabajará muy bien:

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

Answer 6

Lo tengo trabajo llamando

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

Answer 7

para jQuery-UI-1,8

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

Lo importante es necesaria ya que el planificador de evento tiene una element.style que establece z-index a 1.

Answer 8

Ponga el siguiente estilo en el elemento de texto 'input': "position: relative; z-index: 100000;".

El datepicker div toma el índice z de la entrada, pero esto solo funciona si la posición es relativa.

Utilizando esta forma, no tiene que modificar ningún javascript de jQuery UI.

Answer 9

Solución a jquery datepicker 1.8.3 versión, para cambiar el valor del índice z, no es imposible cambiar a través de css.

Ésta funciona bien:

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

Answer 10

Esto funcionó para mí:

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

Answer 11

Me sorprende que:

a) aquí nadie ha mencionado una solución de programación para el establecimiento datepicker z-Index b) no existe ninguna opción para que jQuery DatePicker pase un índice z cuando lo vincula a un elemento.

Estoy usando un método js para calcular el índice más alto. Por defecto, solo comprobamos divs, porque estos son los elementos probables para obtener un valor de índice zy es comprensiblemente más rápido que analizar todos los elementos de la página.

/* 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; 
} 

Porque hay que usar javascript para enlazar el planificador de evento a un elemento, es decir, $ ('# some_element'). Planificador de evento(), en ese momento nos propusimos el estilo del elemento de destino para que selector de fechas recogerá el z-index de ella. Gracias a Ronye Vernaes (en su respuesta en esta página) para señalar que selector de fechas() va a recoger del elemento de destino z-index si tiene uno y está en la posición: relativa:

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

this.target es el elemento de entrada que estamos creando en un campo datepicker. En tiempo de vinculación, obtenemos el índice z más alto en la página y aumentamos el índice Z del elemento. Cuando se hace clic en el icono del marcador de fecha, recogerá ese índice Z del elemento de entrada, porque, como mencionó Ronye Vernaes, de la posición de estilo: relativa.

En esta solución, no intentamos adivinar cuál va a ser el valor más alto del índice z. En realidad lo OBTENEMOS.

Answer 12

El datepicker ahora establece el emergente z-index en uno más que su campo asociado, para mantenerlo delante de ese campo, incluso si ese campo está en un cuadro de diálogo emergente. Por defecto, el índice z es 0, por lo que datepicker termina con 1. ¿Hay algún caso en el que esto no muestre correctamente el datepicker? JQuery Forum Post

Para obtener un índice z de 100. Es necesario una entrada con z-index:99; y jQueryUI actualizará el selector de fecha para ser z-index:100

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

También puede especificar el z-index para heredar, que debe heredar de su cuadro de diálogo y hacer que jQueryUI detecte correctamente el z-index.

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