Наложение в IE 7, чтобы не мешать элементам управления в фоновом режиме

Question

У меня нет уникальной проблемы, но по жизни я не могу понять, что я делаю неправильно.

У меня есть страница с серией разделов. Часть раздела представляет собой небольшое изображение. При нажатии на изображение я хочу показать пользовательский элемент управления. Показывать элемент управления тривиально, установите z-индекс немного выше, чтобы убедиться, что элемент управления находится над всем.

Но пользователь все еще может взаимодействовать с разделами за элементом управления.

Чтобы остановить это, я добавил «одеяло». По сути, это 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. То есть ... он идет документ с контролем и оба покрыты одеялом.

Ответ

scunliffe был самым близким (ответил в комментарии, на которые я не могу ссылаться). Пользовательский элемент управления находится внутри относительно расположенного элемента div (на самом деле несколько вниз). одеяло было просто прикреплено к концу тела. Поэтому он был вне относительно позиционированного div и запустил свой собственный стек z-index (как описано здесь ). Поскольку IE 6/7 не работает в этом отношении, независимо от того, какой я установил z-индекс, он всегда будет ниже общего слоя.

Поэтому я переместил одеяло, чтобы стать первым ребенком внутри относительно расположенного элемента div. Это еще не завершено на 100%, потому что если вы прокрутите (что я не могу остановить с этим решением), общий div - это только высота видимого содержимого. Теперь мне нужно выяснить, как получить полную высоту содержимого (видимого и невидимого).

Answer 1

scunliffe был самым близким (ответил в комментарии, на которые я не могу связаться). Пользовательский элемент управления находится внутри относительно расположенного элемента div (на самом деле несколько вниз). одеяло было просто прикреплено к концу тела. Поэтому он был вне относительно позиционированного div и запустил свой собственный стек z-index (как описано здесь ). Поскольку IE 6/7 не работает в этом отношении, независимо от того, какой я установил z-индекс, он всегда будет ниже общего слоя.

Итак, я переместил одеяло, чтобы стать первым ребенком внутри относительно расположенного элемента div. Это еще не завершено на 100%, потому что если вы прокрутите (что я не могу остановить с этим решением), общий div - это только высота видимого содержимого. Теперь мне нужно выяснить, как получить полную высоту содержимого (видимого и невидимого).

Answer 2

У меня тоже были проблемы с этим. Единственный способ, которым я нашел создание непроницаемого щита, был поместить изображение на задний план DIV (прозрачный GIF работал для меня). И тогда вам все равно придется перехватывать события клавиатуры, чтобы предотвратить переход к элементу управления.

Answer 3

Сделайте привычкой включать намного более высокий z-индекс. Используйте следующее:

z-index:20000;

И, конечно же, вверх по z-index на вашем пользовательском элементе управления Высокий z-индекс исправил мою похожую проблему.

Answer 4

Просто, чтобы бросить мою шляпу в ...

Я недавно это реализовал и использовал:

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.

Answer 5

Вы не упоминаете, из чего состоит пользовательский элемент управления, однако, если в вашем пользовательском элементе управления есть элемент select, то это вызывает модальные проблемы в ie (не могу вспомнить, если они исправили проблему в ie7). В любом случае эта информация может помочь вам решить вашу проблему. Вам понадобится прокладка iframe, чтобы она не просвечивала через оверлей. Много сценариев собирается сделать это для вас.

подробнее

и здесь

Answer 6

Вот как мы работаем над проектом:

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

Это отлично работает на IE 6 и 7 и FF 2 и 3. Я считаю, что это работает и в Safari