наложение div поверх iframe

Я делаю виджет, похожий на виджеты uservoice, за исключением того, что я хочу, чтобы содержимое страницы было в iFrame, а не виджет появлялся через javascript. Как я могу иметь полную страницу (ширина / высота 100%) iFrame с div, закрепленным слева от браузера, пример (используя javascript, а не css/html) здесь:http://uservoice.com/demo

Я хочу, чтобы этот виджет отображался изначально на странице, а содержимое загружалось через iFrame.

любой идеи? Я не могу заставить iFrame заполнить всю страницу, а также появиться сверху. Я играл с Z-индексами без везения. Пример кода:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

            <style>
            #widget {
                left: 0px;
                position: absolute;
                top: 50%;
                display: block;
                z-index:100001;
                width: 25px;
                }
            #content {
                z-index:1;
                }
            </style>
</head> 
<body> 
    <div id="widget"> 
    widget
    </div>


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>
7
css html iframe

6 ответов

Если вы не загружаете кросс-домен, вы можете просто загрузить с помощью вызова jQuery ajax http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

и замените iframe на

<div id="content"></div>
11
5

вероятно, вам нужно добавить margin: auto; к вашему iFrame или плавающему div. Это позволит сделать ее 100%.

пример:

.width {
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:250px;
   height:150px;
   margin:auto;
}

чтобы исправить это слева от браузера, вы можете использовать:

margin:auto auto auto 0;

удачи!

4

С этим кодом я получаю двойную полосу прокрутки справа справа. Один для веб-сайта и один для i-frame.

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
1

вы можете обернуть iframe в div с низким Z-индексом, а затем положить div поверх него с более высоким z-индексом.

0

это сработало для меня:

  • добавить наложение div с высоким Z-индексом и абсолютной позицией
  • сделайте iframe также расположенным абсолютным
  • добавить iframe внутри div

div с наложением:

<div style="z-index:99;position:absolute;top:0;right:0">
  ...overlay html...
</div>

iframe:

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
0