bgiframe com caixa de diálogo jQuery UI 1.8.9 e jQuery 1.5

Question

Então, estou usando a caixa de diálogo do jQuery UI.Mas, pelo que li, há um bug comum no IE6 (o que é uma pena, pois preciso ter certeza de que isso funciona), onde as listas suspensas não prestam atenção às filas de índice z.Eu também li que existe um plugin útil chamado bgiframe para cuidar dos meus problemas de sobreposição.Eu encontrei duas maneiras diferentes pelas quais as pessoas dizem para usá-lo, e nenhuma delas funciona.Posso estar apenas fazendo algo realmente estúpido, mas preciso fazer isso funcionar.

incluindo jquery.bgiframe.js versão 2.1.1 Aqui estão as duas maneiras pelas quais tentei usá -lo sem funcionar:(Incluí todos os jQuery-UI, jQuery e bgiframe na página em que estou trabalhando)

1. A documentação do plugin real diz para fazer isso:

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

   Isso causa uma exceção do jQuery dizendo Objeto esperado.

2. A segunda maneira que vi na página seguinte: http://docs.jquery.com/UI/Dialog/dialog basicamente você acabou de definir bgiframe: true quando você inicializa a caixa de diálogo:

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

Isso não ocorre erro, mas o problema ainda existe no IE6 quando eu o testo.

Estou esquecendo de algo?De que maneira devo usar o bgiframe?Qualquer direção seria muito apreciada.Obrigado pela ajuda!

Answer 1

Você não precisa usar um plugin para isso.O problema com o IE6 e o ​​índice z é que os elementos posicionados no IE6 geram um novo contexto de empilhamento começando com um valor de índice z igual a 0.Portanto, o z-index não funciona corretamente no IE6.A solução alternativa para esse problema é especificar um valor de índice z no seletor pai que seja igual ao índice z especificado no seletor filho.

Verifique o exemplo de trabalho em http://jsfiddle.net/ebgnu/2/

Abaixo está o exemplo que fiz no 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>

Olhe para .parent#a Este é o pai do seletor filho a que têm um índice z de 1.Neste exemplo, a estará em cima de b.digamos que queremos fazer b em cima de a.Tudo o que precisamos fazer é mudar os valores tanto da criança a e é pai para z-index: 0.Isso o enviará para trás.

Answer 2

Eu acredito que você deveria ligar para o bgiframe plug-in no dialog, não o < select >.A versão atual da UI do jQuery não parece listar os bgiframe opção para o widget de diálogo.

A exceção jQuery que você está recebendo parece indicar que o elemento que você está almejando não existe para o seletor especificado (#selectDropdownThatNeedsFixing).

Se o problema persistir, tente usar a barra de ferramentas do desenvolvedor do IE para descobrir se o iframe é realmente criado.