Наложение в IE 7 для предотвращения путаницы с элементами управления в фоновом режиме
У меня нет особой проблемы, но хоть убей, я не могу понять, что делаю не так.
У меня есть страница с несколькими разделами. Часть раздела - небольшое изображение. При щелчке изображения я хочу показать настраиваемый элемент управления. Отображение элемента управления тривиально, установите z-index немного выше, чтобы убедиться, что элемент управления находится поверх всего.
Но пользователь по-прежнему может взаимодействовать с разделами, находящимися за элементом управления.
Чтобы остановить это, я добавил «одеяло». В основном это div, который представляет собой размер документа со следующим CSS (в синтаксисе jQuery) -
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: $(document).height(),
display: 'none',
zIndex: 1,
backgroundColor: '#FF0000'
};
Да ... фон красный, так что я могу его увидеть для тестирования. Я установил непрозрачность на 0,1 (легкое размытие). Затем я установил z-index своего настраиваемого элемента управления на 2, чтобы он находился поверх одеяла.
Это отлично работает в FireFox, Chrome и Safari, но не в IE.
Пользовательский элемент управления не является дочерним по отношению к одеялу.
Цель состоит в том, чтобы следующий документ был покрыт одеялом с контролем поверх одеяла для взаимодействия с ним. Это то, что у меня есть во всех браузерах, кроме IE. То есть ... идет документ с контролем, и оба покрыты одеялом.
Отвечать
сканлифф был самым близким (ответил в комментарии, на который я не могу ссылаться). Пользовательский элемент управления находится внутри относительно позиционированного div (на самом деле несколько вниз). одеяло просто прикреплялось к концу тела. Следовательно, он находился за пределами относительно позиционированного div и запускал собственный стек z-index (как описано в здесь). Поскольку IE 6/7 в этом отношении не работает, независимо от того, что я установил для z-index, он всегда будет ниже одеяла.
Поэтому я переместил одеяло так, чтобы оно было первым дочерним элементом внутри относительно позиционированного div. Это еще не на 100% завершено, потому что, если вы прокручиваете (что я не могу остановить с этим решением), div-одеяло - это только высота видимого содержимого. Теперь мне нужно выяснить, как получить полную высоту содержимого (видимого и невидимого).
Ответы 6
Вот как мы работаем над нашим проектом:
.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}
Это отлично подходит для IE 6 и 7 и FF 2 и 3. Я считаю, что это работает и в Safari.
где вы добавили "одеяло" IE создает новые индексы наложения, которые не могут быть выше, чем в некоторых случаях. Я бы позаботился о том, чтобы ваш контроль в DOM был ниже, чем в одеяле.
Вы можете сделать это более очевидным в своем вопросе. Я просто перечитал ваш вопрос, и не очевидно, что вы его задаете.
Привет, Сканлифф, я думаю, ты решил проблему. Я нашел это (aplus.rs/lab/z-pos), которое показывает проблему в IE. Поскольку одеяло находится в DOM после моего контроля, оно портит стек по z-индексу.
@scunliffe: Вы должны поместить этот комментарий в ответ, чтобы Джастин мог отметить ответ.
Возьмите за привычку включать гораздо более высокий z-индекс. Используйте следующее:
z-index:20000;
И, конечно же, увеличьте z-index в вашем пользовательском элементе управления. Высокий z-индекс решил мою аналогичную проблему.
да ... Я добавил z-index 10000 в blanket и z-index 20000 в настраиваемый элемент управления. Контроль по-прежнему виден под одеялом.
Вы не упоминаете, из чего состоит пользовательский элемент управления, однако, если у вас есть элемент select в вашем пользовательском элементе управления, это вызывает модальные проблемы в ie (не могу вспомнить, исправили ли они проблему в ie7). В любом случае эта информация может помочь вам решить вашу проблему. Вам понадобится прокладка iframe, чтобы она не просвечивала через оверлей. Множество сценариев сделают это за вас.
Нет тега выбора. Просто текстовое поле и несколько флажков.
У меня тоже были проблемы с этим. Единственный способ создать непробиваемый экран, который я нашел, - это поместить изображение на заднем плане DIV (у меня сработал прозрачный GIF). И тогда вам все равно придется перехватывать события клавиатуры, чтобы предотвратить переход к элементу управления.
изображение не требуется, но события клавиатуры очень важно отметить
Я думаю, что у IE6 были проблемы, связанные с необходимостью изображения.
Просто чтобы бросить шляпу ...
Я реализовал это совсем недавно и использовал:
div#shade-box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.7;
filter: Alpha(opacity=70);
}
Очевидно, вы можете изменить или удалить цвет фона. Я добавлял этот div в DOM через Javascript, поэтому мне не нужно было беспокоиться о z-index.
Известно, что работает в FF и IE7.
сканлифф был самым близким (ответил в комментарии, на который я не могу ссылаться). Пользовательский элемент управления находится внутри относительно позиционированного div (на самом деле несколько вниз). одеяло просто прикреплялось к концу тела. Следовательно, он находился за пределами относительно позиционированного div и запускал собственный стек z-index (как описано в здесь). Поскольку IE 6/7 в этом отношении не работает, независимо от того, что я установил для z-index, он всегда будет ниже одеяла.
Поэтому я переместил одеяло так, чтобы оно было первым дочерним элементом внутри относительно позиционированного div. Это еще не на 100% завершено, потому что, если вы прокручиваете (что я не могу остановить с этим решением), div-одеяло - это только высота видимого содержимого. Теперь мне нужно выяснить, как получить полную высоту содержимого (видимого и невидимого).
Проблема не в непрозрачности. Это z-индекс настраиваемого элемента управления. Одеяло в порядке. Но настраиваемый элемент управления находится под одеялом, хотя его z-индекс выше, чем у одеяла. Вот что я пытаюсь понять.