Bgiframe con jquery ui 1.8.9 diálogo y jquery 1.5

Question

Así que estoy usando el cuadro de diálogo Jquery Ui. Pero como tengo una lectura, hay un error común dentro de IE6 (lo que es desafortunado para tener que asegurarme de que esto funcione) donde las listas desplegables no preste atención a las colas de índice Z. También he leído que hay un complemento práctico llamado Bgiframe para cuidar de mis problemas de superposición. He encontrado 2 maneras diferentes, las personas dicen que lo usan y ni el trabajo. Puede que solo esté haciendo algo realmente estúpido, pero necesito hacer esto funcionando.

incluyendo jquery.bgiframe.js versión 2.1.1 Aquí están las 2 formas en que he intentado usarlo sin trabajar: (He incluido todos los jquery-ui, jquery y Bgiframe en la página en la que estoy trabajando)

1. La documentación del complemento real dice hacer esto:

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

   Esto causa una excepción de jQuery que dice que dice el objeto esperado.

2. La segunda forma en que vi de la siguiente página: http:// docs. jquery.com/ui/dialog/dialog Básicamente, simplemente establece bgiframe: true cuando inicializa el diálogo:

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

   Esto no se equivoca, pero el problema aún existe dentro de IE6 cuando lo pruebo.

   ¿Estoy perdiendo algo? ¿De qué manera se supone que debo usar Bgiframe? Cualquier dirección sería muy apreciada. ¡Gracias por su ayuda!

Answer 1

You don't need to use a plugin for this. The problem with IE6 and z-index is, positioned elements in IE6 generate a new stacking context starting with a z-index value of 0. Therefore z-index doesn’t work correctly in IE6. The workaround to this issue is to specify a z-index value in the parent selector that is equal to the z-index specified in the child selector.

Check working example at http://jsfiddle.net/ebgnu/2/

Below is the example i did in 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>

Look at .parent#a This is the parent of the child selector a that have a z-index of 1. In this example, a will be on top of b. let's say we want to make b on top on a. All we need to do is change values of both the child a and it's parent to z-index: 0. This will send it to the back.

Answer 2

I believe that you're supposed to call the bgiframe plugin on the dialog, not the < select >. The current jQuery UI version doesn't seem to list the bgiframe option for the dialog widget anymore.

The jQuery Exception you're getting seems to indicate, that the element that you're targeting doesn't exist for the selector specified (#selectDropdownThatNeedsFixing).

If the problem persists, try to use the IE Developer Toolbar to find out if the iframe is actually created.