Как я могу расположить div на два iframe, где один iframe имеет внешний (другой домен) контент? - PullRequest
Новая
       12

Как я могу расположить div на два iframe, где один iframe имеет внешний (другой домен) контент?

0 голосов
/ 20 декабря 2008

Я ищу способ позиционирования элемента div (это будет всплывающее окно, которое будет активировано пользователем, который наводит курсор и / или щелкает по значку подобно лайтбоксу) над разделенным iframe, где верхний iframe содержит контент из моего сервер и нижний iframe - это контент с другого сервера. Как это: 

 ----------------------------------------
 |                                      |
 |                   Upper              |
 |                                      |
 |           -------------------        |
 |          |      DIV          |       |
 ---------                       -------|
 |          |                   |       |
 |          --------------------        |
 |                                      |
 |                 Lower                |
 |                                      |
 ----------------------------------------

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

Кстати, я также опубликовал еще один вопрос: ajax и iframes для внешнего контента и что я должен использовать в этом случае. Поэтому нижний (внешний контент) не обязательно должен быть iframe, в зависимости от ответа на него.

Ответы [ 2 ]

5 голосов
/ 20 декабря 2008

Взгляните на это:

http://ahare.us/test.html

Эта страница делает в значительной степени то, что вы просите. Я бы постарался избегать z-index в максимально возможной степени, потому что когда вы идете по этому пути, вы привержены ему способами, которые могут стать болезненными.

(только чтобы вы знали, что я проверял это в Firefox 3 и IE 6).

Вот код - у меня есть два правила для #pop div, первое - это просто презентация, второе - стили позиционирования, которые заставляют все это работать. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            iframe { width:500px; height:200px; }
            #pop { width:400px; height:300px; background:#ff9; }
            #pop { position:absolute; top:50px; left:50px; }
        </style>
    </head>
    <body>
        <div id="pop">this is the popup</div>   
        <div>
            <iframe src="content.html"></iframe>
        </div>
        <div>
            <iframe src="http://www.google.com"></iframe>
        </div>
    </body>
</html>
2 голосов
/ 20 декабря 2008

Лучше всего убедиться, что вы установили стили: 

.overlapper
{
    position: absolute;
    z-index: 9000;  /* some very high value to ensure its always on top */
    top: 50px; /* whatever positioning you need */
    left: 50px;
    width: 500px;
    height: 100px;
}

Просто установите ваши значения на то, что вам нужно. Главное, о чем следует помнить, это z-индекс, более высокие значения означают его более высокое в порядке слоя с 0 или 1, являющимся самым низким.

некоторые вещи на заметку; Вы можете установить свою позицию в «положение: относительное;» Кроме того, если абсолютное позиционирование не способствует макету, в этом случае вам может понадобиться использовать отрицательные верхние значения, чтобы перетащить его поверх первого iframe.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...