Наложение в IE 7 для предотвращения путаницы с элементами управления в фоновом режиме

StackOverflow https://stackoverflow.com/questions/375868

  •  22-08-2019
  •  | 
  •  

Вопрос

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

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

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

Чтобы остановить это, я добавил "одеяло".В основном div, который соответствует размеру документа со следующим CSS (в синтаксисе jQuery) - 

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

Да ... фон красный, так что я могу видеть это для тестирования.Я установил непрозрачность на 0.1 (легкое размытие).Затем я устанавливаю z-индекс моего пользовательского элемента управления равным 2, чтобы он находился поверх одеяла.

Это отлично работает в FireFox, Chrome и Safari, но не в IE.

Пользовательский элемент управления не является дочерним элементом blanket.

Цель состоит в том, чтобы следующий документ был покрыт blanket с элементом управления поверх blanket для взаимодействия с ним.Это то, что я получаю во всех браузерах, кроме IE.Далее ie...it отправляется документ с контролем, и оба они накрыты одеялом.

Ответ

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

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

Это было полезно?

Решение 3

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

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

Другие советы

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

z-index:20000;

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

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

Вот как мы делаем oppacity в нашем проекте:

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

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

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

Подробная информация

и здесь

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

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

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-индексе.

Известно, что он работает в FF и IE7.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top