Centrer la fenêtre contextuelle

Question

J'ouvre une fenêtre pour l'authentification facebook et j'aimerais que le contenu de cette page soit centré dans la fenêtre contextuelle. Je suis PAS demandant comment centrer la fenêtre contextuelle sur l'écran. Je demande comment centrer la page dans la fenêtre contextuelle. Javascript est 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

Ce n'est pas une solution générale au centrage popup, mais il a résolu mon problème avec l'auth facbeook dialogue. Vous devez mettre

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

dans votre initializers/omniauth afin que facebook générerez une page qui ressemble bien centrée dans une fenêtre contextuelle.

Answer 2

Vous voulez utiliser la méthode window.scrollTo() pour centrer la fenêtre à la moitié de la largeur du corps/hauteur moins la moitié de la fenêtre innerWidth/innerHeight respectivement. Cela devrait accomplir ce que vous recherchez:

window.onload = function() { 
    var w = window.innerWidth * 0.5; 
    var h = window.innerHeight * 0.5; 
    var x = document.body.clientWidth * 0.5 - w; 
    var y = document.body.clientHeight * 0.5 - h; 
    window.scrollTo(x,y); 
} 

Answer 3

Utilisez cette fonction pour centrer votre popup.

jQuery.fn.center = function() { 
      this.css("position","absolute"); 
      this.css("top", (($(window).height() - this.outerHeight())/2) + $(window).scrollTop() + "px"); 
      this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
      return this; 
     } 

Si vous voulez centrer div id SimpleModal-conteneur puis utilisez

$('#simplemodal-container').center();