#javascript #html #css #internet-explorer #yui
#javascript #HTML #css #internet-explorer #yui
Вопрос:
В моем веб-приложении есть информационное всплывающее окно modal, которое по сути является просто a <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:
Для того, чтобы расположение панели на странице имело значение, панель 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 обрабатывает узлы. Когда он был добавлен, ничего не значит, только где он был добавлен.