Обойти проблемы с z-index в IE, чтобы поставить модальное * поверх * панели YUI - PullRequest
Новая
       1

Обойти проблемы с z-index в IE, чтобы поставить модальное * поверх * панели YUI

1 голос
/ 11 октября 2011

В моем веб-приложении есть информационное модальное всплывающее окно, которое по сути представляет собой просто <div> с атрибутом CSS display, установленным в none. Фрагмент JavaScript переключает отображение атрибута, когда требуется модальное отображение.

В большинстве мест, где этот модал можно активировать, он работает просто отлично. Тем не менее, на сайте есть одна страница, где какой-то старый код YUI вызывает модал в форме объекта "YAHOO.widget.Panel". Когда кто-то запускает информационное событие внутри этого модального YUI, мне нужно, чтобы мой информационный модал по-прежнему появлялся поверх YUI.

Это прекрасно работает во всех браузерах, кроме IE. Однако в IE информационный модал полностью скрыт, поскольку он скрывается за YUI.

Существует ряд вопросов по StackOverflow, связанных с "z-index" проблемами CSS в IE, но большинство из них, похоже, связаны с проблемами компоновки при начальной загрузке страницы. Проблема, с которой я сталкиваюсь, заключается в том, что панель YUI создается на лету после загрузки страницы.

Независимо от того, насколько высоко я установил z-индекс для своего информационного модального режима (ни как низко я говорю YUI, чтобы установить z-индекс для его модального) ... IE всегда дает панели YUI более высокий z-индекс, потому что был создан позже.

Есть ли чистый обходной путь для ситуации, подобной этой ... где вам нужно, чтобы IE дал более высокий z-индекс для <div>, созданного во время загрузки страницы, чем для индекса, созданного JavaScript после загрузка страницы?

1 Ответ

0 голосов
/ 11 октября 2011

Поскольку расположение панели на странице имеет значение, панель YUI, вероятно, добавляется к телу.При вызове метода .render() панели YUI укажите родительский div, совпадающий с вашим родительским div всплывающих окон, 

yuipopup.render('infodivparent');

, который обеспечит правильную работу z-индексов.

то есть изменить с этого, 

<body>
<div id="yui_panel" style="z-index: 2;"></div>
<div id="content" style="z-index: 1;">
    <div id="mypopup" style="z-index: 100"></div>
</div>
</body>

на это, 

<body>
<div id="content" style="z-index: 1;">
    <div id="mypopup" style="z-index: 100"></div>
    <div id="yui_panel" style="z-index: 2;"></div>
</div>
</body>

Я также должен отметить, что время никогда не зависит от того, как DOM обрабатывает узлы.Когда он был добавлен, ничего не значит, только где он был добавлен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...