Numéro z-index du sélecteur de date Jquery

Question

J'ai un diaporama div, et j'ai un datepicker champ ci-dessus que la div.

Quand je clique dans le datepicker de terrain, le datepicker spectacle panneau derrière diaporama div.

Et j'ai mis le script:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Je ne peux donc pas modifier le z-index de datepicker en CSS. Le z-index de datepicker qui le script génère est 1 et mon slideshow div(aussi appel thru googleajaxapi) z-index est de 5. Donc je suppose que je dois augmenter le z-index de sélecteur de date de plus de 5. Donc, il y a un moyen d'augmenter ?

Quelqu'un peut-il m'aider?

Answer 1

Placez le style suivant dans l'élément de texte 'input': position: relative; z-index: 100000; .

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

De cette manière, vous n’avez pas à modifier le javascript de jQuery UI.

Answer 2

simplement dans votre utilisation de css ' .ui-datepicker{ z-index: 9999 !important;} ' Ici 9999 peut être remplacé par la valeur de couche que vous voulez que votre datepicker soit disponible. Aucun code ne doit être commenté, ni l'ajout de ' position:relative; ' css sur les éléments d'entrée. En effet, l'augmentation de l'index z des éléments d'entrée aura un effet sur tous les boutons de type d'entrée, ce qui peut ne pas être nécessaire dans certains cas.

Answer 3

ça a marché pour moi !

Answer 4

Basé sur marksyzm, cela a fonctionné pour moi:

 $('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
 

Answer 5

En ajoutant à la réponse de Justin, si vous êtes inquiet au sujet du balisage désordonné ou si vous ne voulez pas que cette valeur soit codée en dur dans CSS, vous pouvez définir l'entrée avant qu'elle ne soit affichée. Quelque chose comme ça:

 $('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});
 

Notez que vous ne pouvez pas omettre la règle "position": "relative" , car le plugin recherche dans le style en ligne les deux règles ou la feuille de style, mais pas les deux .

Le dialog("widget") est le sélecteur de date réel qui apparaît.