Question

我在FB的粉丝页面中嵌入了iframe，我想在屏幕中央显示一个固定的框（如对话框）。

我该怎么做？

更新

看看为我们工作的应用程序：

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

enter image description here

当我点击后面的绿色按钮（名为“申请此职位”）时，它总是在屏幕中央显示“谢谢”对话框。

Answer 1

我今天遇到了同样的问题。解决方案是您只需要从iframe的父级（Facebook URL）获取视口的滚动位置。所以，Facebook已经为它提供了JavaScript SDK。

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

您可以使用clientHeight，clientWidth，scrollTop和scrollLeft来计算中心位置。

Answer 2

你做不到。 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的popup box functions：alert()，confirm()和prompt()。

将元素固定在屏幕中心的iframe中

更新

2 个答案: