Problème avec les plugins jQuery Dialog et Datepicker

pour jquery-ui-1.8

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

l'important est nécessaire puisque le curseur de données a un élément.style qui Place z-index à 1.

cela a fonctionné pour moi:

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

place le style suivant à l'élément de texte "input": "position: relative; z-index: 100000;".

le datapicker div prend l'index z de l'entrée, mais cela ne fonctionne que si la position est relative.

de cette façon, vous n'avez pas à modifier le javascript de jQuery UI.

à partir de la version 1.7.2 de L'UI-datepicker-div n'est plus un élément CSS valide. "ui-datepicker" semble être l'enveloppeur le plus externe et le réglage de l'index-z à 99999 fonctionne correctement pour moi autant que je sache

pour jquery-ui-1.7.2

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

mettez ceci en haut de votre page. Il fonctionnera très bien:

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

j'ai eu de travail en appelant

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

je suis choqué que:

a) personne ici n'a mentionné une solution programmatique pour définir le z-Index du curseur de données b) il n'y a pas d'option pour le DatePicker de jQuery de passer un Index-z lorsqu'il se lie à un élément.

j'utilise une méthode js pour calculer l'indice le plus élevé. Nous ne vérifions par défaut que les divs, parce que ce sont les éléments susceptibles d'obtenir une valeur de l'index-z et est naturellement plus rapide que l'analyse de chaque élément sur la page.

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

parce que nous devons utiliser javascript pour lier le curseur de données à un élément, i.e. $('#some_element').datepicker (), à ce moment-là, nous avons défini le style de l'élément cible de sorte que datepicker récupérera l'index-z de celui-ci. Merci à Ronye Vernaes (dans sa réponse sur cette page) pour avoir fait remarquer que datepicker () récupérera l'Index z de l'élément cible s'il en a un et est réglé à la position: relative:

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

this.la cible est de l'entrée l'élément que nous faisons dans un datepicker champ. Au moment de la reliure, nous obtenons l'index z le plus élevé de la page et nous faisons l'index z de l'élément un plus élevé. Lorsque l'icône du cliqueur de données est cliquée, il va prendre cet index-z de l'élément d'entrée, parce que, comme Ronye Vernaes mentionné, de la position de style: relative.

dans cette solution, nous n'essayons pas de deviner quelle sera la valeur la plus élevée de l'indice z. Nous avons en fait.

le dialogue est rendu dans une iframe, et est rendu en plus de tout le reste (y compris les dropdowns). Pendant ce temps, le curseur de données est rendu en HTML normal et positionné de manière absolue.

on dirait que le curseur de données est rendu absolument relatif à la page mère au lieu de l'iframe. Avez-vous essayé de placer le calendrier à l'intérieur de la boîte de dialogue comme un blog standard, non-absolu-positionné? Ou vous pourriez utiliser des chutes à la place.

Solution à la version 1.8.3 de jQuery datepicker, pour changer la valeur de l'indice z, il n'est pas impossible de changer via css.

celui-ci fonctionne bien:

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

le curseur de données positionne maintenant l'index z popup à un de plus que son champ associé, pour le garder devant ce champ, même si ce champ est lui-même dans une boîte de dialogue popup. Par défaut, le z-index est 0, donc datepicker finit par 1. Y a-t-il un cas où cela ne montre pas correctement le curseur de données? JQuery Post Sur Le Forum

pour obtenir un indice z de 100. Vous avez besoin d'une entrée avec z-index:99; et JQueryUI mettra à jour le curseur de données doit être z-index:100

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

vous pouvez également spécifier le Z-index à hériter qui devrait hériter de votre boîte de dialogue et faire jQueryUI pour détecter correctement le z-index.

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