bgiframe mit jQuery UI 1.8.9 Dialog und jQuery 1.5

Question

Ich verwende also das Dialogfeld der jQuery-Benutzeroberfläche.Aber wie ich gelesen habe, gibt es einen häufigen Fehler in IE6 (was bedauerlich ist, dass ich sicherstellen muss, dass dies funktioniert), bei dem Dropdown-Listen Z-Index-Warteschlangen nicht berücksichtigen.Ich habe auch gelesen, dass es ein praktisches Plugin namens bgiframe gibt, das meine Overlay-Probleme löst.Ich habe zwei verschiedene Möglichkeiten gefunden, wie man es verwenden soll, und keine davon funktioniert.Ich mache vielleicht nur etwas wirklich Dummes, aber ich muss das zum Laufen bringen.

einschließlich jQuery.bgiframe.js Version 2.1.1 Hier sind die 2 Wege, die ich versucht habe, es zu verwenden, ohne zu arbeiten:(Ich habe alle jQuery-UI, jQuery und bgiframe in die Seite eingebunden, an der ich arbeite)

1. In der Dokumentation des eigentlichen Plugins heißt es:

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

   Dies führt zu einer jQuery-Ausnahme mit der Meldung „Objekt erwartet“.

2. Der zweite Weg, den ich auf der folgenden Seite gesehen habe: http://docs.jquery.com/UI/Dialog/dialog Im Grunde hast du es einfach eingestellt bgiframe: true Wenn Sie den Dialog initialisieren:

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

Dies führt nicht zu einem Fehler, aber das Problem besteht immer noch in IE6, wenn ich es teste.

Vermisse ich etwas?Wie soll ich bgiframe verwenden?Jede Richtung wäre sehr dankbar.Ich danke Ihnen für Ihre Hilfe!

Answer 1

Sie müssen hierfür kein Plugin verwenden.Das Problem mit IE6 und Z-Index besteht darin, dass positionierte Elemente in IE6 einen neuen Stapelkontext generieren, beginnend mit einem Z-Index-Wert von 0.Daher funktioniert der Z-Index in IE6 nicht korrekt.Die Problemumgehung für dieses Problem besteht darin, im übergeordneten Selektor einen Z-Index-Wert anzugeben, der dem im untergeordneten Selektor angegebenen Z-Index entspricht.

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/ebgnu/2/

Unten ist das Beispiel, das ich in jsfiddle gemacht habe.

.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>

Ansehen .parent#a Dies ist das übergeordnete Element des untergeordneten Selektors a die einen Z-Index von 1 haben.In diesem Beispiel liegt a über b.Nehmen wir an, wir wollen b auf a setzen.Wir müssen lediglich die Werte beider Kinder ändern a und es ist übergeordnet z-index: 0.Dadurch wird es nach hinten geschickt.

Answer 2

Ich glaube, dass du das anrufen solltest bgiframe Plugin auf der dialog, nicht der < select >.Die aktuelle jQuery-UI-Version scheint das nicht aufzulisten bgiframe Option für das Dialog-Widget mehr.

Die jQuery-Ausnahme, die Sie erhalten, scheint darauf hinzudeuten, dass das Element, auf das Sie abzielen, für den angegebenen Selektor nicht existiert (#selectDropdownThatNeedsFixing).

Wenn das Problem weiterhin besteht, versuchen Sie, die IE Developer Toolbar zu verwenden, um herauszufinden, ob das Problem besteht iframe tatsächlich erstellt wird.