以Facebook画布应用为中心的对话框 [英] Centered dialog on Facebook canvas app

问题描述

如果用户滚动浏览我的Facebook画布应用程序，我如何创建一个保持居中的对话框？

How can I create a dialog that stays centered as the user scrolls through my Facebook canvas app?

我已经阅读了这个的帖子，但是在那里描述的方法（听着无证的Facebook事件）对我来说没有效果。

I've read this post on the subject, but the method described there (listening to the undocumented facebook-event) did not work for me.

推荐答案

看起来Facebook不再轮询服务器来更新pageInfo作为其库的一部分。但是，编写自己轮询的东西是相当简单的，并且正确地移动对话框：

It looks like Facebook no longer poll the server to update the pageInfo as part of their library. However, it's fairly simple to write something that polls it yourself, and move the dialog appropriately:

var timeout;
var positionDialog = function(){
    FB.Canvas.getPageInfo(function(pageInfo){
         $("#dialog").animate({top: Math.max(parseInt(pageInfo.scrollTop) - parseInt(pageInfo.offsetTop) + 
            ((parseInt(pageInfo.clientHeight)-$("#dialog").outerHeight())/2), 0)}, 100);
         timeout = setTimeout(positionDialog, 250);
    });
};

var showDialog = function(){
    // show your dialog
    $("#dialog").show();
    positionDialog();
};

var hideDialog = function(){
    $("#dialog").hide();
    clearTimeout(timeout);
};

注意：我使用setTimeout而不是setInterval，因为你不知道ajax多长时间电话将会采取，也不想处理无序响应。

Note: I've used setTimeout rather than setInterval, as you don't know how long the ajax calls will take, and don't want to be handling out of order responses.

这篇关于以Facebook画布应用为中心的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！