bgiframe с jQuery UI 1.8.9 Dialog и jQuery 1.5 - PullRequest
Новая
       33

bgiframe с jQuery UI 1.8.9 Dialog и jQuery 1.5

3 голосов
/ 18 февраля 2011

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

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

  1. Документация самого плагина гласит: 

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

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

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

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

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

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

Ответы [ 2 ]

6 голосов
/ 27 февраля 2011

Вам не нужно использовать плагин для этого.Проблема с IE6 и z-index состоит в том, что позиционированные элементы в IE6 генерируют новый контекст стека, начинающийся со значения z-index, равного 0. Следовательно, z-index не работает правильно в IE6.Обойти эту проблему можно, указав в родительском селекторе значение z-index, равное z-index, указанному в дочернем селекторе.

Проверьте рабочий пример на http://jsfiddle.net/ebgnu/2/

Ниже приведен пример, который я сделал в 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>

Посмотрите на .parent#a Это родительский элемент дочернего селектораa с z-индексом 1. В этом примере a будет поверх b.скажем, мы хотим сделать b сверху на a.Все, что нам нужно сделать, это изменить значения дочернего элемента a и его родителя на z-index: 0.Это отправит это назад.

1 голос
/ 23 февраля 2011

Я считаю, что вы должны вызывать плагин bgiframe для dialog, а не < select >. Текущая версия пользовательского интерфейса jQuery, похоже, больше не содержит опции bgiframe для диалогового виджета.

Исключение jQuery, которое вы получаете, похоже, указывает на то, что целевой элемент не существует для указанного селектора (#selectDropdownThatNeedsFixing).

Если проблема сохраняется, попробуйте использовать панель инструментов разработчика IE, чтобы узнать, действительно ли создан iframe.

...