Question

I’m popping up a window for facebook authentication and I would like the contents of that page to be centered in the popup window. I am NOT asking for how to center the popup window on the screen. I am asking how to center the page in the popup window. Javascript is ok.

<a href="/auth/facebook" id="facebook_button" data-width="800" data-height="400">

<script>
$("#facebook_button").click(ask_for_facebook_auth);

function popupCenter(url, width, height, name) {
    var left = (screen.width/2)-(width/2);
    var top = (screen.height/2)-(height/2);
    return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}

function ask_for_facebook_auth(e){
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
    e.stopPropagation(); return false;
}
</script>

Answer 1

This isn’t a general solution to the popup centering, but it solved my issue with the facbeook auth dialog. You have to put

config.omniauth :facebook, APP_ID, APP_SECRET, { :display => 'popup' }

in your initializers/omniauth so that facebook will generate a centered page that looks nice in a popup.