web-dev-qa-db-fra.com

Pourquoi jQuery UI 1.10 supprimer l'option zIndex du dialogue jQuery?

J'ai trouvé la dernière version de jQuery UI (1.10) supprimer l'option zIndex. Et c'est confirmé sur le site Web de jQuery.

Cela m'a vraiment choqué. S'il vous plaît pensez à cela:

Lorsque nous avons un jqgrid et que nous utilisons editrow() ou addrow() pour ouvrir une boîte de dialogue d'édition, il y a de nombreux champs, dont certains ont un événement auto-défini, comme lorsque vous cliquez dessus, une autre boîte de dialogue jQuery s'affichera. pour montrer quelques éléments de l'arborescence à choisir.

Sous jQuery UI 1.9 (incluse), vous pouvez définir l'option zIndex de la boîte de dialogue jQuery sur une valeur supérieure à celle de la boîte de dialogue d'édition de jqgrid (le support de boîte de dialogue d'édition jqgrid est défini sur zIndex), de sorte que la boîte de dialogue jQuery soit toujours visible et puisse être vue et utilisée.

Sous jQuery UI 1.10, vous ne pouvez pas définir zIndex. La boîte de dialogue jQuery est toujours située derrière la boîte de dialogue d'édition jqgrid.

Je pense qu'une telle scène est très courante.

Pourquoi jQuery UI 1.10 supprime-t-il l'option zIndex de la boîte de dialogue jQuery? Comment contrôler l'ordre z-index quand il y a plus d'une boîte de dialogue?

jquerydialogz-index
18
ivanchain

Je pense que je comprends votre problème. L'index z-index CSS de la boîte de dialogue de l'interface utilisateur jQuery n'est pas assez élevé pour toujours s'afficher au-dessus de votre contenu. Voici une solution rapide:

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */
}
26
BONER DAN

Il suffit de lire le journal des modifications de jQuery UI 1.10 (avec le bogue qui a été archivé pour cela):

Option zIndex supprimée

Semblable à l'option stack, l'option zIndex n'est pas nécessaire avec une implémentation d'empilement appropriée. Le Z-index est défini dans CSS et l'empilement est maintenant contrôlé en s'assurant que La boîte de dialogue active est le dernier élément "empilement" de son parent.

En d'autres termes: vous devriez bien empiler les éléments au lieu de "pirater" votre façon d'empiler à l'aide de l'option zIndex.

6
MarcoK

Si vous souhaitez appliquer l'index z à l'aide de jQuery dès que vous instanciez la boîte de dialogue, vous pouvez procéder comme suit:

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);
2
Robin Tang

As-tu essayé?

$( ".selector" ).dialog( "moveToTop" );

référence: http://api.jqueryui.com/dialog/#method-moveToTop

0
Alain Gauthier

Avez-vous essayé d'utiliser l'option "appendTo"? Ajoutez simplement un wrapper avec un z-index de ce que vous voulez qu'il soit, puis utilisez l'ID de cet élément comme sélecteur dans l'argument "appendTo".

http://api.jqueryui.com/dialog/#option-appendTo

0
Dan Stotmeister