Bgiframe с jquery ui 1.8.9 диалог и jquery 1.5

Question

Так что я использую диалоговое окно jQuery ui. Но, поскольку я прочитал, что в IE6 есть общий ошибку в IE6 (что, к сожалению, я должен убедиться, что это работает для), где выпадающие списки не обращают внимания на очереди Z-индекса. Я также прочитал, что есть удобный плагин, называемый BgiFrame, чтобы позаботиться о моих оверлейных бед. Я нашел 2 разных способа, как люди говорят, чтобы использовать его, и не работают. Я могу просто делать что-то действительно глупо, но мне нужно сделать эту работу.

включая jquery.bgiframe.js версия 2.1.1 Вот два способа, которыми я пытался использовать его без работы: (я включил все jQuery-ui, jQuery и bgiframe на странице, на которой я работаю)

1. Документация из фактического плагина говорит:

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

   .

   Это вызывает исключение jQuery, говоря, что ожидаемый объект.

2. Второй способ, которым я видел со следующей страницы: http:// docs. jquery.com/ui/dialog/dialog в основном вы просто устанавливаете bgiframe: true при инициализации диалогового окна:

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

   Это не ошибка, но проблема все еще существует в IE6, когда я проверю его.

   Я что-то упускаю? Каким образом я должен использовать BGIFRAME? Любое направление было бы очень ценится. Спасибо за вашу помощь!

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.