bgiframe avec la boîte de dialogue jQuery UI 1.8.9 et jQuery 1.5

Question

J'utilise donc la boîte de dialogue de jQuery UI.Mais comme je l'ai lu, il existe un bug courant dans IE6 (ce qui est regrettable pour lequel je dois m'assurer que cela fonctionne) où les listes déroulantes ne font pas attention aux files d'attente z-index.J'ai également lu qu'il existe un plugin pratique appelé bgiframe pour résoudre mes problèmes de superposition.J'ai trouvé 2 façons différentes de l'utiliser, et aucune ne fonctionne.Je fais peut-être quelque chose de vraiment stupide, mais je dois faire en sorte que ça marche.

y compris jQuery.bgiframe.js version 2.1.1 Voici les 2 façons dont j'ai tenté de l'utiliser sans travailler:(J'ai inclus tous les jQuery-UI, jQuery et bgiframe dans la page sur laquelle je travaille)

1. La documentation du plugin actuel dit de faire ceci :

   $("#selectDropdownThatNeedsFixing").bgiframe();
   

   Cela provoque une exception jQuery indiquant que l'objet est attendu.

2. La deuxième façon que j'ai vue sur la page suivante : http://docs.jquery.com/UI/Dialog/dialog en gros, tu viens de définir bgiframe: true lorsque vous initialisez la boîte de dialogue :

   $( ".selector" ).dialog({ bgiframe: true });
   

Cela ne génère pas d'erreur, mais le problème existe toujours dans IE6 lorsque je le teste.

Est-ce que j'ai raté quelque chose ?De quelle manière suis-je censé utiliser bgiframe ?N’importe quelle direction serait très appréciée.Merci pour votre aide!

Answer 1

Vous n'avez pas besoin d'utiliser un plugin pour cela.Le problème avec IE6 et z-index est que les éléments positionnés dans IE6 génèrent un nouveau contexte d'empilement commençant par une valeur z-index de 0.Par conséquent, z-index ne fonctionne pas correctement dans IE6.La solution de contournement à ce problème consiste à spécifier une valeur d'index z dans le sélecteur parent qui est égale à la valeur d'index z spécifiée dans le sélecteur enfant.

Consultez un exemple de travail sur http://jsfiddle.net/ebgnu/2/

Vous trouverez ci-dessous l'exemple que j'ai fait dans jsfiddle.

.parent{
    position: relative;
    color:white;
}
.parent#a {
    height: 2em;
    z-index: 1;
}
.parent#a .child{
    position: absolute;
    height: 6em;
    width: 2em;
    z-index: 1;
    background:blue;
}
.parent#b {
    height: 2em;
    background:red;
}

<div class="parent" id="a">
    <div class="child">a</div>
</div>
<div class="parent" id="b">
    <div class="child">b</div>
</div>

Regarder .parent#a Il s'agit du parent du sélecteur d'enfant a qui ont un indice z de 1.Dans cet exemple, a sera au-dessus de b.disons que nous voulons placer b au-dessus de a.Tout ce que nous devons faire, c'est changer les valeurs de l'enfant a et c'est le parent de z-index: 0.Cela l'enverra à l'arrière.

Answer 2

Je crois que tu es censé appeler le bgiframe plugin sur le dialog, pas le < select >.La version actuelle de jQuery UI ne semble pas répertorier les bgiframe option pour le widget de dialogue.

L'exception jQuery que vous obtenez semble indiquer que l'élément que vous ciblez n'existe pas pour le sélecteur spécifié (#selectDropdownThatNeedsFixing).

Si le problème persiste, essayez d'utiliser la barre d'outils du développeur IE pour savoir si le iframe est effectivement créé.