New! Telegram канал про микроконтроллеры, SDR приемники, радиолюбительство и электронику в целом:

t.me/HighFrequency

На правах рекламы:

Проблемы с SELECT и Z-INDEX в Microsoft Internet Explorer 6.0 19 июня 2008 г.

Недавно я столкнулся с проблемой, которая ввела меня просто в ступор. Предположим, что мы проектируем пользовательский интерфейс с использованием технологий AJAX (лично я пользуюсь библиотеками JSHttpRequest), содержащий выпадающие меню SELECT. После определенного действия пользователя или в процессе обработки его запроса нам необходимо декоративно скрыть часть (или весь) интерфейса полупрозрачным слоем, и вывести поверх него, скажем, один из популярных индикаторов прогресса. Все бы ничего, но когда мы попытаемся наложить DIV с Z-INDEX заведомо выше чем у остального интерфейса, с удивлением обнаружим, что SELECT через слой просто напросто "просвечивает", т.е. всегда лежит поверх слоя.

Пример (скриншот):

Такое происходит, когда поверх формы мы кладем слой, основаный DIV или TABLE (с "position: absolute;" и большим z-index). Сначала я написал скрипт, который убирал поле SELECT (display: none;), но мне показалось это чрезчур похожим на танцы с бубном. Решение пришло почти сразу: под слой мы подкладываем еще один слой, основаный на IFRAME:

<iframe id='hlayer2' width='430' height='250'  
    frameborder='0' hspace='0' vspace='0' style='display: none;'>
</iframe>

Стиль слоя с информацией — #hlayer, полупрозрачного слоя — #hlayer2

#hlayer2{
filter:alpha(opacity=90); 
opacity: 0.90;
position: absolute;
width: 430;
height: 290;
background: #ffffff;
z-index: 9;
}

#hlayer{
position: absolute;
z-index: 15;
}

Результат (положительный эффект виден лишь под Internet Explorer 6.0):

Пример интерфейса

Заголовок фотографии

Описание изображения
        

Внимание!
Размер изображения в точках не должен превышать 1200х1200.


Кстати, проблема относится не только к DIV и TABLE, но и к остальным тегам, напомню, что слой можно построить на основе любого тега — FONT, SPAN, STRONG, etc. —, просто DIV и TABLE гораздо более подходящие сущности для формирования блочной структуры.


Красная пилюля


comments powered by Disqus

 

Про радио 4

 

Про микроконтроллеры 1

 

Про фото 27

 

Блог 35

 

Про кино 8

 

Про WEB 6

 

 

New! Telegram канал про микроконтроллеры, SDR приемники и радиолюбительство в целом:

t.me/HighFrequency

 

Поток сознания тут — twitter.com/shtorkin

И тут — facebook.com/shtorkin

Сюда можно писать в ЛС — vk.com/shtorkin

Youtube — youtube.com/user/SemenShtorkin

Картинки — instagram.com/shtorkin


  © 2007 – 2018 Семен Шторкин (Семен Орлов)
Для связи:

Все права на представленные на сайте материалы принадлежат Семену Орлову, если не указано иного. При копировании материалов активная индексируемая ссылка на сайт «shtork.in» обязательна.