DIV поверх iframe - JavaScript, Ajax

Revival001 · 17.09.2011, 22:16

На сайте встроено видео с youtube, встраивание происходит через iframe. При нажатии одной из кнопок возникает необходимость показать пользователю сообщение, которое должно быть поверх всего контента (представляет из себя див), но див постоянно уползает под iframe. Пробовал менять z-index - не помогает. На иностранных форумах прочитал, что проблема решается легко через jQuery, но так как не работал с этим фреймворком (да и вообще на javascript никогда не писал) ничего не могу сделать. Что можете посоветовать?
p.s. Поместил в сюда, а не в раздел css, так как насколько я понял стандартными средствами css проблему не решить.

Lesha · 18.09.2011, 03:55

Код HTML:

<html>
<body bgcolor=blue>
<div style="position: absolute; background-color: red; width: 100px; height: 100px; margin: 40px;">привет мир</div>
<iframe width=300 height=300 src="http://www.google.ru/">

Revival001 · 18.09.2011, 23:53

Пробовал, в Chrome не работает.

Lesha · 19.09.2011, 00:17

у хрома свои стандарты, имхо слой поверх iframe это изврат, вот и не показывает.

JTG · 19.09.2011, 15:09

А у меня в хроме работает. Вообще со стороны разработчиков браузеров как минимум кросс-доменные iframe логично было бы запретить перекрывать другими элементами, т.к. это потенциальная дырка в безопасности - можно загрузить во фрейм чужой сайт и прилепить над формой логина свои поля, например.

Код HTML:

<html>
<head>
<META CONTENT='Copyright © 2011 Kelvin Castelino. All Rights Reserved.' NAME='copyright'/>
<META CONTENT='Kelvin Oneil Castelino' NAME='author'/>
<META CONTENT='Solution for creating Div over Iframe' NAME='description'/>
<script type="text/javascript">
     // make the specified div a windowed control in IE6
     // this masks an iframe (which is a windowed control) onto the div,
     // turning the div into a windowed control itself
     function overlay(d)
     {
        var is_ie6 =
           document.all && 
           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
        if (is_ie6)
        {
           var html =
              "<iframe style=\"position: absolute; display: block; " +
              "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
              "filter: mask(); background-color: #ffffff; \"></iframe>";
           if (d) d.innerHTML += html;
           // force refresh of div
           var olddisplay = d.style.display;
           d.style.display = 'none';
           d.style.display = olddisplay;
        };
     }
</script>
</head>
<body onload="overlay(document.getElementById('test'));";>
<div id="test" style="position: absolute; z-index: 2;top: 50; left: 30;zoom:1;background-color:#ffffff; width: 200px; height: 200px; 
border:1px solid #dddddd;">this is the top div which is on top of the iframe.
&nbsp;
</div>
<select style="position: absolute; top: 100;">
<option>test</option>
</select>

</body>
</html>

17.09.2011, 22:16	#1
Revival001 Форумчанин Регистрация: 30.09.2008 Сообщений: 483	DIV поверх iframe На сайте встроено видео с youtube, встраивание происходит через iframe. При нажатии одной из кнопок возникает необходимость показать пользователю сообщение, которое должно быть поверх всего контента (представляет из себя див), но див постоянно уползает под iframe. Пробовал менять z-index - не помогает. На иностранных форумах прочитал, что проблема решается легко через jQuery, но так как не работал с этим фреймворком (да и вообще на javascript никогда не писал) ничего не могу сделать. Что можете посоветовать? p.s. Поместил в сюда, а не в раздел css, так как насколько я понял стандартными средствами css проблему не решить. Последний раз редактировалось Revival001; 17.09.2011 в 22:20.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
в iframe не фиксируется div c position:fixed	sbury	HTML и CSS	0	17.02.2011 13:34
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
должен подгрузиться скрипт который бы создал и вставил в этот див <iframe></iframe>	Beni	JavaScript, Ajax	1	05.08.2009 14:30
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Есть проблема с версткой на div. Накладывается фон поверх соседнего контейнера.	Volfgang	HTML и CSS	1	15.12.2008 09:43

18.09.2011, 23:53	#3
Revival001 Форумчанин Регистрация: 30.09.2008 Сообщений: 483	Пробовал, в Chrome не работает.

19.09.2011, 00:17	#4
Lesha Форумчанин Регистрация: 30.01.2009 Сообщений: 418	у хрома свои стандарты, имхо слой поверх iframe это изврат, вот и не показывает.