Я открыл консоль (chrome\firefox) и запустил следующие строки:
$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");
#popupContent должен быть выше всех, но на него влияет непрозрачность #popupFrame.
Содержимое не содержится в #popupFrame, что делает это очень странным.
Цель состоит в том, чтобы создать окно с предупреждением об ошибках Firefox.
Буду признателен за любую помощь.
Спасибо заранее.
Второй div position: static (по умолчанию), поэтому z-index не применяется к нему.
Вам нужно поместить (установить свойство position на что-либо, кроме static, вы, вероятно, захотите relative в этом случае) все, что вы хотите дать z-index to.
Непрозрачность изменяет контекст вашего z-индекса, также как и статическое позиционирование. Либо добавьте непрозрачность к элементу, который его не имеет, либо удалит из элемента, который это делает. Вам также придется либо сделать статические позиции обоих элементов, либо указать относительную или абсолютную позицию. Вот некоторый фон в контекстах: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
z-index применяется только к элементам, которым была предоставлена явная позиция. Добавьте position:relative в #popupContent, и вам должно быть хорошо идти.