Зафиксируйте элемент внутри фрейма в центре экрана - PullRequest
0 голосов
/ 09 ноября 2011

У меня есть iframe, встроенный в фан-страницу FB, и я хочу показать фиксированное поле (например, диалоговое окно) в центре экрана.

Как я могу это сделать?

ОБНОВЛЕНИЕ

Приложение Look for Work For Us:

http://www.facebook.com/DiscoverIntel?ref=nf&sk=app_404596412628

enter image description here

Когда я нажимаю зеленую кнопку позади(с именем «Подать заявку на эту должность») в центре экрана всегда отображается диалоговое окно «Спасибо».

Ответы [ 2 ]

2 голосов
/ 26 июня 2012

У меня сегодня такая же проблема.Решение заключается в том, что вам просто нужно получить позицию прокрутки окна просмотра от родительского элемента iframe, который является URL-адресом Facebook.Итак, Facebook уже предоставил JavaScript SDK для него.

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/

Вы можете использовать clientHeight, clientWidth, scrollTop и scrollLeft для вычисления центральной позиции.

0 голосов
/ 09 ноября 2011

Вы не можете. Элемент iframe заполняет элемент div, стиль которого position установлен на relative. Это невозможно и не зря. Что, если центр экрана не находится над вашим iframe? Facebook не хочет, чтобы вы делали что-то сумасшедшее и портили презентацию самой страницы (то есть скрывали рекламные объявления, создавали фальшивые элементы, похожие на Facebook и т. Д.).

Но если вы хотите центрировать элемент внутри iframe, вы можете сделать что-то вроде этого:

<!DOCTYPE html>
<html>
    <head>
        <title>Centering an element with CSS</title>
        <style type="text/css">
            #center_container {
                left: 50%;
                position: fixed;
                top: 50%;
            }
            #center {
                border: 1px dashed #000; /* added to show size and position of element */
                height: 100px;
                left: -100px; /* -0.5 * width */
                position: absolute;
                top: -50px; /* -0.5 * height */
                width: 200px;
            }
        </style>
    </head>

    <body>
        <div id="center_container">
            <div id="center">This tag is centered.</div>
        </div>
    </body>
</html>

В противном случае вам придется придерживаться функций всплывающего окна JavaScript : alert(), confirm() и prompt().

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